/* Secciones propias de la home */

/* ── Hero foto (fachada de la tienda) ── */
/* La foto es el banner: ancho completo siempre y alto responsivo. Usamos alto fijo
   (no aspect-ratio + max-height) porque esa combinación encoge el ancho del bloque
   y deja franjas; con width:100% + height clamp la foto cubre todo el ancho. */
.hero--photo { position: relative; background: var(--green); overflow: hidden; width: 100%; height: clamp(440px, 52vw, 600px); }
/* Foto a "cover": llena el recuadro y recorta lo justo. Zoom lento (Ken Burns) = vida sin distraer. */
/* Carrusel de la fachada: las 3 fotos apiladas; solo la activa es visible y hace el
   Ken Burns. El fundido lo controla .is-active (la clase la rota hero.js). */
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 14%; opacity: 0; transition: opacity 1.1s ease; transform: scale(1.06); }
.hero__img.is-active { opacity: 1; animation: hero-kenburns 9s ease-out forwards; }
/* Velo de abajo hacia arriba: hace legibles los botones sobre cualquier zona de la foto. */
.hero--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(36,48,41,.78), rgba(36,48,41,.30) 34%, rgba(36,48,41,0) 60%); }
.hero__inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; }
.hero__btns { display: flex; gap: 10px; justify-content: center; opacity: 0; animation: hero-rise .7s ease-out .35s forwards; }
/* Ghost con un punto de fondo translúcido + desenfoque = se lee sobre la foto y se ve "pro". */
.hero--photo .btn--ghost { background: rgba(36,48,41,.30); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

@keyframes hero-kenburns { to { transform: scale(1); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .hero__img { animation: none; transform: scale(1); transition: none; }
  .hero__btns { animation: none; opacity: 1; }
}

/* ── Tira de confianza ── */
.trust-strip { background: var(--card); border-top: 3px solid var(--green); }
.trust-strip__row { display: flex; }
.trust-strip__item { flex: 1; text-align: center; padding: 12px 6px; font-size: 10px; font-weight: 600; line-height: 1.3; border-right: 1px dashed rgba(59,91,68,.25); }
.trust-strip__item:last-child { border-right: none; }
.trust-strip__item b { display: block; font-size: 24px; margin-bottom: 6px; color: var(--green); }

/* ── Títulos de sección ── */
.section__title { font-size: var(--fs-h2); color: var(--green); margin-bottom: 14px; }
.section__title--em { font-style: italic; font-weight: 500; }

/* ── Dos puertas Perros/Gatos ── */
.doors__grid { display: flex; gap: var(--gap); align-items: flex-start; }
.doors__col { flex: 1; min-width: 0; }
.door { width: 100%; aspect-ratio: 4/3; border-radius: var(--r-lg); display: grid; place-items: end center; padding-bottom: 14px; position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
/* El degradado de marca queda de fondo (se ve mientras carga la foto). */
.door--dogs { background: linear-gradient(160deg, var(--green-2), var(--green)); }
.door--cats { background: linear-gradient(160deg, var(--sea), var(--green)); }
/* Foto a "cover": llena el recuadro 4:3 y recorta lo que sobra. */
.door__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Velo oscuro de abajo a arriba para que el nombre se lea sobre cualquier foto. */
.door::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(36,48,41,.72), rgba(36,48,41,.12) 45%, rgba(36,48,41,0) 70%); }
.door__label { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 900; color: var(--cream); font-size: 22px; text-shadow: 0 1px 6px rgba(36,48,41,.45); }
.doors__subs { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 9px; }
.doors__subs a { display: inline-block; font-size: 14px; font-weight: 600; color: var(--green); background: var(--card); border-radius: var(--r-pill); padding: 9px 16px; box-shadow: var(--shadow-card); white-space: nowrap; transition: background .15s ease, color .15s ease; }
.doors__subs a:hover { background: var(--green); color: var(--cream); }
.doors__subs a.doors__subs-all { background: var(--green); color: var(--cream); }
.doors__subs a.doors__subs-all:hover { background: var(--green-2); }

/* ── Banda cuenco (foto enmarcada) ── */
.bowl { background: var(--green); color: var(--cream); padding-block: 40px; position: relative; }
.bowl__inner { display: grid; gap: 18px; text-align: center; }
.bowl__photo { width: 100%; border-radius: var(--r-lg); box-shadow: 0 14px 34px rgba(36,48,41,.30); }
.bowl__copy { text-align: center; }
.section__title--light { color: var(--cream); }

/* ── Por qué Rulos ── */
.why__inner { display: flex; gap: 16px; align-items: center; background: var(--card); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-card); }
.why__dog { width: 84px; flex: 0 0 auto; }

/* ── Banda envío ── */
.ship-band { background: var(--gold); color: var(--ink); }
.ship-band__inner { padding-block: 14px; text-align: center; font-size: 13px; font-weight: 600; }

/* ── Newsletter ── */
.newsletter__card { background: var(--green); color: var(--cream); border-radius: var(--r-lg); padding: 24px 18px; text-align: center; }
.newsletter__form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.newsletter__form input { padding: 13px; border-radius: var(--r-md); border: none; font: inherit; }
.newsletter__legal { display: block; margin-top: 10px; opacity: .7; font-size: 11px; }

@media (min-width: 768px) {
  .hero__inner { padding-bottom: 38px; }
  .hero__btns { gap: 14px; }
  .trust-strip__item { font-size: 13px; padding: 18px; }
  .bowl__inner { grid-template-columns: 1fr 1fr; text-align: left; align-items: center; }
  .newsletter__form { flex-direction: row; justify-content: center; }
  .newsletter__form input { max-width: 280px; }
}

/* Hover de las puertas Perros/Gatos */
@media (hover: hover) {
  .door { transition: transform .15s ease, box-shadow .15s ease; }
  .door:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(36,48,41,.22); }
}

/* ── Tira de marcas (logos en círculos blancos, fila estática) ── */
.brands { text-align: center; }
.brands__sub { color: rgba(36,48,41,.7); margin: -4px 0 18px; }
.brands__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.brand { width: 92px; height: 92px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-card); display: grid; place-items: center; padding: 16px; transition: transform .15s ease, box-shadow .15s ease; }
.brand img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (hover: hover) { .brand:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(36,48,41,.16); } }
@media (min-width: 768px) { .brand { width: 108px; height: 108px; } }

/* ── Reseñas de clientes (dentro de la franja verde) ──
   Tarjetas crema sobre el verde: contrastan sin romper la franja. */
.resenas { display: grid; gap: 12px; margin-top: 18px; text-align: left; }
.resena { background: rgba(255,253,245,.10); border: 1px solid rgba(247,241,217,.22); border-radius: var(--r-md); padding: 14px 16px; }
.resena blockquote { font-family: var(--font-display); font-size: 16px; line-height: 1.5; color: var(--cream); margin-bottom: 8px; }
.resena figcaption { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .01em; }
/* Sin estrellas: ninguno de los tres dio una puntuación. Pintarlas sería
   inventarse un dato, aunque el tono de la reseña sea bueno. */

/* ── Cupón de bienvenida (sustituye al antiguo bloque de newsletter) ──
   Sin formulario: el código se ve y se copia. Menos fricción y, sobre todo, no
   promete un correo que no llega. */
.cupon__card { background: var(--green); color: var(--cream); border-radius: var(--r-lg); padding: 26px 18px; text-align: center; }
.cupon__card > p { margin-top: 4px; font-size: 15px; opacity: .92; }
.cupon__codigo { display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 16px auto 10px; padding: 12px 26px; cursor: pointer;
  background: var(--cream); color: var(--green);
  border: 2px dashed var(--green); border-radius: var(--r-md);
  box-shadow: 0 5px 0 rgba(36,48,41,.35); transition: transform .08s ease, box-shadow .08s ease; }
.cupon__codigo span { font-family: var(--font-ui); font-weight: 800; font-size: 22px; letter-spacing: .08em; }
.cupon__copiar { font-size: 11px; font-weight: 600; opacity: .7; letter-spacing: .02em; }
.cupon__codigo:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(36,48,41,.35); }
.cupon__codigo.is-copiado { background: var(--gold); border-color: var(--ink); }
.cupon__legal { display: block; margin-top: 6px; opacity: .75; font-size: 12px; line-height: 1.5; }