/* Ama tu Propósito — línea visual de la marca: lila del logo, dorado, durazno */
:root {
  --lila: #B68ABE;
  --lila-claro: #F2E8F4;
  --durazno: #F8ECE4;
  --ciruela: #3D2150;
  --ciruela-honda: #2C173B;
  --oro: #C49345;
  --oro-hondo: #7A561A;
  --tinta: #3D2150;
  --tinta-suave: #5F4A6B;
  --blanco: #FFFCFA;
  --wa: #1FAF55;

  --titulo: "Marcellus", "Palatino Linotype", Palatino, Georgia, serif;
  --texto: "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;

  --marco: 70rem;
  --borde-lateral: clamp(1rem, 5vw, 3rem);
  --aire: clamp(3.5rem, 9vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: var(--ciruela);
  text-wrap: balance;
}

h2 { font-size: clamp(1.9rem, 4.2vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.55rem); }
p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--oro-hondo);
  outline-offset: 3px;
  border-radius: 4px;
}

.marco {
  max-width: var(--marco);
  margin-inline: auto;
  padding-inline: var(--borde-lateral);
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--ciruela);
  color: var(--blanco);
  padding: .6rem 1rem;
  z-index: 10;
}
.saltar:focus { top: 1rem; }

/* Arco: el marco de ventana de santuario que repite la página */
.arco {
  margin: 0;
  overflow: hidden;
  border-radius: 999px 999px 1.25rem 1.25rem;
}
.arco img { width: 100%; height: 100%; object-fit: cover; }

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  transition: background-color .2s, color .2s, border-color .2s;
}
.boton--principal { background: var(--ciruela); color: var(--blanco); }
.boton--principal:hover { background: var(--ciruela-honda); }
.boton--linea {
  border: 1.5px solid var(--ciruela);
  color: var(--ciruela);
  background: transparent;
}
.boton--linea:hover { background: var(--ciruela); color: var(--blanco); }

.enlace-suave {
  color: var(--oro-hondo);
  font-weight: 700;
  text-underline-offset: .3em;
}

/* Cabecera */
.cabecera {
  background: var(--blanco);
  border-bottom: 1px solid rgba(196, 147, 69, .35);
  padding-top: env(safe-area-inset-top, 0px);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}
.marca {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--titulo);
  font-size: 1.2rem;
  color: var(--ciruela);
}
.marca img { width: 40px; }
.cabecera__wa {
  font-weight: 700;
  font-size: .95rem;
  color: var(--ciruela);
  text-underline-offset: .3em;
}

/* Portada */
.portada {
  background: var(--durazno);
  padding-block: clamp(2.5rem, 7vw, 5.5rem);
}
.portada__fila {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.loto-respira {
  width: 96px;
  margin-bottom: 1.5rem;
  animation: respirar 7s ease-in-out infinite;
  transform-origin: 50% 70%;
}
@keyframes respirar {
  0%, 100% { transform: scale(.94); opacity: .8; }
  50% { transform: scale(1.04); opacity: 1; }
}
.portada h1 {
  font-size: clamp(2.3rem, 6.2vw, 4.1rem);
  max-width: 14ch;
}
.portada__intro {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: 1.125rem;
  color: var(--tinta-suave);
}
.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}
.portada__foto {
  max-width: 26rem;
  aspect-ratio: 3 / 4;
  justify-self: center;
  width: 100%;
  box-shadow: 0 0 0 1px rgba(196, 147, 69, .6), 0 0 0 .6rem rgba(182, 138, 190, .22);
}

/* Mary */
.mary { background: var(--lila-claro); padding-block: var(--aire); }
.mary__fila {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.mary__foto {
  width: min(100%, 20rem);
  aspect-ratio: 3 / 4;
  justify-self: center;
}
.mary__pendiente {
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--lila);
}
.mary__pendiente img { width: 120px; height: auto; object-fit: contain; }
.mary__texto { max-width: 36rem; }
.mary__texto p { margin-top: 1.1rem; color: var(--tinta-suave); }
.mary__texto h2 + p { margin-top: 1.5rem; }
.mary__texto .mary__firma {
  font-family: var(--titulo);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--ciruela);
  padding-top: .5rem;
}

/* Servicios y productos: filas */
.servicios { padding-block: var(--aire); }
.filas {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}
.fila {
  display: grid;
  gap: .9rem;
  padding-block: 1.75rem;
  border-top: 1px solid rgba(196, 147, 69, .55);
}
.fila:last-child { border-bottom: 1px solid rgba(196, 147, 69, .55); }
.fila__cuerpo { max-width: 38rem; color: var(--tinta-suave); }
.fila__dato {
  margin-top: .5rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--tinta);
}
.fila .boton { justify-self: start; }

.productos { background: var(--lila-claro); padding-block: var(--aire); }
.productos__intro {
  margin-top: 1rem;
  max-width: 36rem;
  color: var(--tinta-suave);
}
.destacado {
  display: grid;
  gap: 2rem;
  margin-top: 2.75rem;
  margin-bottom: 1rem;
}
.destacado__texto p { margin-block: .9rem 1.5rem; color: var(--tinta-suave); max-width: 32rem; }
.destacado h3 { font-size: clamp(1.6rem, 3vw, 2rem); }

.galeria {
  list-style: none;
  margin: 0 calc(var(--borde-lateral) * -1);
  padding: .25rem var(--borde-lateral) 1rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(62%, 15rem);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.galeria li { aspect-ratio: 3 / 4; scroll-snap-align: start; }

/* Cierre: el lila del logo, como en sus piezas de marca */
.cierre {
  background: var(--lila);
  padding-block: var(--aire);
  text-align: center;
}
.cierre__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.cierre__caja img { width: 140px; margin-bottom: .75rem; }
.cierre__caja p { max-width: 32rem; color: var(--ciruela); }
.cierre .boton { margin-top: .5rem; }
.cierre__numero { font-size: .95rem; font-weight: 700; }
.redes { list-style: none; display: flex; gap: 1.5rem; padding: 0; margin: 0; }
.redes a { color: var(--ciruela); font-weight: 700; }

/* Pie */
.pie {
  background: var(--ciruela);
  color: #E9DDEE;
  font-size: .875rem;
  padding-block: 2rem calc(6rem + env(safe-area-inset-bottom, 0px));
}
.pie p + p { margin-top: .5rem; }

/* Botón flotante de WhatsApp */
.wa-flotante {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  z-index: 5;
}
.wa-flotante:hover { background: #17964A; }

/* Escritorio */
@media (min-width: 56rem) {
  .portada__fila { grid-template-columns: 1.15fr .85fr; }
  .portada__foto { justify-self: end; }
  .mary__fila { grid-template-columns: 20rem 1fr; }
  .fila {
    grid-template-columns: 17rem 1fr auto;
    align-items: start;
    gap: 2.5rem;
  }
  .fila .boton { justify-self: end; }
  .destacado { grid-template-columns: 22rem 1fr; align-items: center; }
  .galeria { margin-right: calc(var(--borde-lateral) * -1); margin-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loto-respira { animation: none; }
  .boton { transition: none; }
}