/* ============================================================
   SENTIDA Pastelería — home v6 (estilo sentida-v2)
   Hero con un círculo y el sello, «Elegí por dónde empezar», «Lo que más nos
   piden», «Todo empieza con una idea» y el cierre. Lo común está en comun/base.css.
   ============================================================ */

/* Hero */
/* El hero va en crema y «Elegí por dónde empezar», abajo, en rosa: las dueñas
   pidieron intercambiar los dos fondos el 07/10/2026. */
.hero{background:var(--blanco); overflow:hidden}
.hero-in{min-height:680px; display:grid; grid-template-columns:49% 51%; align-items:center; position:relative}
.hero-txt{position:relative; z-index:2; padding-block:48px}
.hero-marca{display:block; width:clamp(260px,34vw,480px); height:auto}
.hero-lema{display:block; margin-top:20px; font-size:clamp(3rem,5.3vw,5rem); line-height:1.07; letter-spacing:-.045em}
.hero-baja{max-width:420px; margin:28px 0 35px; font-size:16px; line-height:1.8; color:var(--marron-medio)}
.hero-acc{display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px}
/* El arte queda dentro de la envoltura: la nota y el sello se ven enteros en cualquier ancho. */
.hero-arte{position:absolute; left:51%; right:var(--lateral); top:0; bottom:0}
.circulo-grande{position:absolute; right:0; top:43px; width:min(100%,610px); border-width:10px}
.circulo-grande img{object-position:center 37%}
/* Las fotos del hero se turnan (home.js): todas apiladas, se ve la .visible. */
.hero-fotos img{position:absolute; inset:0; opacity:0}
.hero-fotos img.visible{opacity:1}
.mov .hero-fotos img{transition:opacity 1s ease-in-out}
.hero-pausa{position:absolute; left:50%; bottom:14px; z-index:1; width:44px; height:44px; margin-left:-22px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--blanco); color:var(--marron-medio); cursor:pointer; box-shadow:0 4px 10px -4px var(--sombra); transition:color .2s}
.hero-pausa:hover{color:var(--marron)}
.hero-pausa .ico{width:16px; height:16px}
.hero-pausa .ico-seguir,.hero-fotos.pausada .ico-pausar{display:none}
.hero-fotos.pausada .ico-seguir{display:block}
.hero-sello{position:absolute; right:0; bottom:20px; width:170px; height:170px; border-radius:50%; background:var(--blanco); transform:rotate(-11deg); filter:drop-shadow(0 8px 15px var(--sombra-suave))}

/* Elegí por dónde empezar */
.empezar{background:var(--crema)}
.puertas{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start}
.puertas > li:nth-child(2){margin-top:44px}
.puerta{display:flex; flex-direction:column; min-height:420px; padding:32px 24px 25px; border:1px solid var(--beige); background:var(--blanco); transition:background-color .2s, transform .2s}
.puerta .circulo{width:min(100%,200px); margin:0 auto 24px}
.puerta-n{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--celeste-profundo)}
.puerta h3{margin:13px 0 28px; font-size:clamp(1.75rem,2.2vw,2.125rem); line-height:1.08; letter-spacing:-.035em}
.puerta-ir{margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:13px; border-top:1px solid var(--beige); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase}
.puerta:hover{background:var(--crema-suave); color:var(--marron)}
.mov .puerta:hover{transform:translateY(-5px)}
.mov .puerta .circulo img{transition:transform .3s}
.mov .puerta:hover .circulo img{transform:scale(1.04)}

/* Todo empieza con una idea */
.idea{background:var(--crema)}
.idea-in{display:grid; grid-template-columns:47% 53%; grid-template-rows:auto 1fr}
.idea-txt{padding-right:70px; align-self:start}
.idea-txt .eti{margin-bottom:24px}
.idea-txt h2{font-size:clamp(2.9375rem,5vw,4.5rem); line-height:1.1; letter-spacing:-.045em; margin-bottom:25px}
.idea-txt > p:not(.eti){max-width:410px; margin-bottom:32px; font-size:16px; line-height:1.8; color:var(--marron-medio)}
.idea-foto{position:relative; grid-column:2; grid-row:1 / span 2; min-height:525px; overflow:hidden}
/* La foto acompaña el alto del texto y los pasos, sin imponer el suyo. */
.idea-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%}
.idea-pasos{grid-column:1; grid-row:2; list-style:none; margin:48px 70px 0 0; padding:0}
.idea-pasos li{display:grid; grid-template-columns:55px 1fr; column-gap:10px; padding:19px 0; border-top:1px solid var(--beige)}
.idea-n{grid-row:span 2; font-size:24px; line-height:1.2; color:var(--celeste-profundo)}
.idea-pasos h3{font-size:24px; line-height:1.1}
.idea-pasos p{margin-top:5px; font-size:14px; line-height:1.6; color:var(--marron-medio)}


/* Banda celeste */

/* Cierre */
.cierre{display:flex; flex-direction:column; align-items:center; text-align:center; padding-block:clamp(95px,15vh,140px)}
.cierre-sello{width:140px; height:140px; margin-bottom:25px; border-radius:50%}
.cierre .eti{margin-bottom:20px}
.cierre h2{font-size:clamp(3.4375rem,6vw,5.625rem); line-height:1.05; letter-spacing:-.045em}
.cierre > p:not(.eti):not(.botones){max-width:430px; margin:26px auto 32px; font-size:15px; color:var(--marron-medio)}
.cierre .botones{justify-content:center}

@media (max-width:1180px){
  .circulo-grande{width:88%; top:60px}
}
@media (max-width:1080px){
  .puerta{padding:25px 15px}
}
@media (max-width:899px){
  .idea-in{display:flex; flex-direction:column; align-items:stretch}
  .idea-txt{padding:0}
  .idea-foto{height:430px; min-height:0; margin-top:42px}
  .idea-pasos{margin:20px 0 0}
  .hero-in{display:flex; flex-direction:column-reverse; min-height:0; padding-block:25px 55px}
  .hero-arte{position:relative; left:auto; right:auto; width:100%; height:335px}
  /* Una sola torta: el círculo va centrado, con el sello abajo a la derecha. */
  .circulo-grande{width:min(78vw,310px); top:0; left:0; right:0; margin-inline:auto; border-width:6px}
  .hero-sello{width:104px; height:104px; right:0; bottom:3px}
  .hero-txt{text-align:center; padding-block:20px 0}
  .hero-marca{width:min(78vw,320px); margin-inline:auto}
  .hero-lema{font-size:clamp(2.6875rem,10vw,3.875rem); margin-top:13px}
  .hero-baja{font-size:15px; margin:19px auto 25px; max-width:360px}
  .hero-acc{flex-direction:column}
  .hero-acc .btn{width:min(100%,340px)}
  .puertas{grid-template-columns:1fr; gap:12px}
  .puertas > li:nth-child(2){margin-top:0}
  .puerta{min-height:0; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 16px; padding:16px}
  .puerta .circulo{width:96px; margin:0; border-width:4px}
  .puerta .puerta-n{flex:1 1 150px}
  .puerta h3{flex-basis:100%; margin:6px 0 10px}
  .puerta-ir{flex-basis:100%}
}
@media (max-width:390px){
  .hero-arte{height:300px}
  .circulo-grande{width:270px}
}