/* ===== Portada en carrusel =====
   Las diapositivas se apilan en la misma celda de la grilla: el alto lo marca la más alta y no hay saltos. */
.hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; background: #0b0b0b; }
.slides { display: grid; }
.slide {
  grid-area: 1 / 1; position: relative; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity 900ms ease, visibility 0s linear 900ms;
}
.slide.activo { opacity: 1; visibility: visible; transition: opacity 900ms ease, visibility 0s; z-index: 1; }
.slide.activo .hero-bg img { animation: entrada 7s ease-out both; }
.hero-bg { position: absolute; inset: 0; }
.hero-grid {
  position: relative; z-index: 1; display: grid; align-items: center;
  min-height: clamp(440px, 40vw, 620px); padding-top: 40px; padding-bottom: 56px;
}

/* Diapositiva con texto: la foto se apoya a la derecha y su borde izquierdo se funde con el fondo */
.s-split .hero-bg img {
  position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: none; aspect-ratio: 1672 / 941; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
}
.s-split::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #0b0b0b 0%, #0b0b0b 22%, rgba(11, 11, 11, 0.7) 40%, rgba(11, 11, 11, 0) 60%),
    linear-gradient(0deg, var(--bg) 0%, rgba(15, 15, 14, 0) 22%);
}
.s-split .hero-grid { z-index: 2; }


/* Diapositiva de banner: la imagen se ve completa, centrada, y sus lados se funden con el fondo */
.s-full { min-height: clamp(440px, 40vw, 620px); }
.banner-box { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); aspect-ratio: 1672 / 941; max-width: 100%; }
.banner-box img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.slide.activo .banner-box img { animation: entrada 7s ease-out both; }
/* el botón se ubica debajo del texto "AMPI TACTIL" del banner */
.banner-cta { position: absolute; left: 9%; bottom: 13%; }
.slide.activo .banner-cta { animation: aparecer 800ms var(--ease-out) both 400ms; }
.s-full-info { display: none; }

.hero h1, .hero-copy h2 { font-size: clamp(40px, 4.4vw, 68px); max-width: 15ch; }
.hero-copy { max-width: 560px; }
.slide.activo .hero-copy, .slide.activo .s-full-cta { animation: aparecer 800ms var(--ease-out) both 250ms; }
.hero-copy p { color: #c9c4b8; font-size: 17px; max-width: 38ch; margin: 18px 0 30px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@keyframes entrada { from { transform: scale(1.05); } }

/* Controles */
.car-flecha {
  position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px;
  display: grid; place-items: center; border: 1px solid rgba(236, 232, 223, 0.25); border-radius: 50%;
  background: rgba(11, 11, 11, 0.45); color: var(--text); font-size: 20px; backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 200ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}
.car-flecha.prev { left: 20px; }
.car-flecha.next { right: 20px; }
.car-flecha:active { transform: scale(0.94); }
.hero:hover .car-flecha, .car-flecha:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .car-flecha:hover { background: rgba(11, 11, 11, 0.75); } }
.car-puntos { position: absolute; left: 50%; bottom: 18px; z-index: 3; display: flex; gap: 6px; transform: translateX(-50%); }
.car-puntos button { padding: 10px 4px; background: none; border: 0; }
.car-puntos span { display: block; width: 28px; height: 3px; border-radius: 2px; background: rgba(236, 232, 223, 0.3); overflow: hidden; }
/* la barra del punto activo se llena mientras corre el tiempo de la diapositiva */
.car-puntos [aria-selected="true"] span { background: rgba(236, 232, 223, 0.3); position: relative; }
.car-puntos [aria-selected="true"] span::after {
  content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left;
  animation: progreso var(--dur, 7s) linear both;
}
.hero.pausado .car-puntos [aria-selected="true"] span::after { animation-play-state: paused; }
@keyframes progreso { from { transform: scaleX(0); } }

/* ===== Beneficios ===== */
.perks { border-bottom: 1px solid var(--line); background: var(--surface); }
.perks-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.perk-regalo strong { color: var(--accent); }
@media (max-width: 1180px) and (min-width: 861px) {
  .perks-row { grid-template-columns: 1fr 1fr; }
  .perk:nth-child(odd) { padding-left: 0; border-left: 0; }
  .perk:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
.perk { display: flex; gap: 14px; align-items: flex-start; padding: 26px 24px 26px 0; }
.perk + .perk { padding-left: 24px; border-left: 1px solid var(--line); }
.perk i { font-size: 28px; color: var(--accent); flex: none; }
.perk strong { display: block; font-weight: 600; }
.perk span { font-size: 14px; color: var(--muted); }

/* ===== Secciones ===== */
.section { margin-top: 96px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.section h2 { font-size: clamp(34px, 4vw, 52px); }
.text-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--accent); font-weight: 500; }
.text-link i { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .text-link:hover i { transform: translateX(3px); } }

/* ===== Bento del chaleco ===== */
.bento-title { margin-bottom: 28px; }
.bento {
  display: grid; gap: 12px;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "main text back" "main colors back";
}
.bento > * { margin: 0; border-radius: var(--radius); overflow: hidden; }
.b-main { grid-area: main; background: #8d8b86; display: block; }
.b-main img, .b-back img { width: 100%; height: 100%; object-fit: cover; }
.b-text { grid-area: text; background: var(--surface); border: 1px solid var(--line); padding: 28px; }
.b-text i { font-size: 30px; color: var(--accent); }
.b-text h3, .b-colors h3 { font-size: 28px; margin: 14px 0 10px; }
.b-text p { color: var(--muted); margin: 0; }
.b-lista { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.b-lista li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.35; }
.b-text .b-lista i { font-size: 18px; flex: none; margin-top: 1px; }
.b-text .b-nota { margin-top: 18px; font-size: 13px; }
.b-back { grid-area: back; position: relative; background: #8d8b86; display: block; color: var(--text); }
.b-main img, .b-back img { transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .b-main:hover img, .b-back:hover img { transform: scale(1.03); } }
.b-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px;
  background: linear-gradient(transparent, rgba(10, 10, 9, 0.85)); font-size: 14px;
}
.b-colors { grid-area: colors; background: var(--accent); color: var(--accent-ink); padding: 28px; display: grid; align-content: start; }
.b-colors h3 { margin-top: 0; }
.b-colors ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-weight: 500; }
.b-colors li { display: flex; align-items: center; gap: 8px; }
.b-colors li span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.25); }
.b-colors-txt { margin: 0 0 22px; color: rgba(23, 20, 15, 0.8); font-weight: 500; }
.b-colors .btn { background: var(--accent-ink); color: var(--text); border-color: var(--accent-ink); }
.b-precio { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.b-precio strong { font-family: var(--font-display); font-size: 34px; line-height: 1; }
.b-precio span { font-size: 13px; font-weight: 500; color: rgba(23, 20, 15, 0.82); }
.b-mayor { margin: 6px 0 22px; font-size: 14px; font-weight: 500; color: rgba(23, 20, 15, 0.8); }
.b-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.b-cotizar { color: var(--accent-ink); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Preguntas ===== */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 17px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { color: var(--accent); transition: transform 200ms var(--ease-out); flex: none; }
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-list p { color: var(--muted); margin: 0 0 20px; max-width: 60ch; }

@media (max-width: 860px) {
  .hero-copy p { font-size: 16px; margin: 16px 0 24px; }
  .perks-row { grid-template-columns: 1fr; }
  .perk, .perk + .perk { padding: 18px 0; border-left: 0; }
  .perk + .perk { border-top: 1px solid var(--line); }
  .section { margin-top: 64px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "main main" "text text" "back colors"; }
  .faq { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 520px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "main" "text" "colors" "back"; }
}

/* Tablet: foto completa arriba y texto debajo */
@media (max-width: 860px) {
  .car-flecha { display: none; }
  .hero-bg { position: relative; }
  .s-split .hero-bg img {
    position: static; display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; -webkit-mask-image: none; mask-image: none;
  }
  .s-split::after { background: linear-gradient(0deg, var(--bg) 0%, var(--bg) 40%, rgba(15, 15, 14, 0) 60%); }
  .hero-grid { min-height: 0; margin-top: -48px; padding-top: 0; padding-bottom: 56px; }
  .s-full { min-height: 0; }
  .banner-box { position: static; transform: none; width: 100%; }
  .banner-box img { display: block; height: auto; -webkit-mask-image: none; mask-image: none; }
  .banner-cta { display: none; }
  .s-full::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--bg) 0%, var(--bg) 40%, rgba(15, 15, 14, 0) 60%); }
  .s-full-info { display: block; margin-top: -28px; position: relative; z-index: 2; padding-top: 0; padding-bottom: 56px; }
  .s-full-info h2 { font-size: clamp(30px, 6vw, 44px); }
  .s-full-info p { color: #c9c4b8; margin: 10px 0 22px; }
  .car-puntos { bottom: 14px; }
}

/* Celular: mismas proporciones que en tablet (foto completa 16:9 arriba, texto debajo) en ambas diapositivas */
@media (max-width: 600px) {
  .hero-grid { margin-top: -28px; padding-bottom: 52px; }
  /* Alto suficiente para el banner con más texto: así la portada no crece al cargar los banners */
  .s-split .hero-grid, .s-full-info { min-height: 300px; }
}

/* Títulos de los banners secundarios (nombres de producto, más largos): caben en 2 líneas */
.hero-copy h2 { font-size: clamp(34px, 3.6vw, 56px); max-width: 17ch; }

/* Llamado para empresas */
.emp-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: 36px 40px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface);
}
.emp-cta h2 { font-size: clamp(30px, 3.4vw, 44px); }
.emp-cta p { color: var(--muted); margin: 10px 0 0; max-width: 60ch; }
@media (max-width: 600px) { .emp-cta { padding: 24px 20px; } .emp-cta .btn { width: 100%; } }