/* =========================================================
   Proyecto Raíces — PAGES · Inicio (index.html)
   ---------------------------------------------------------
   Composición propia de la home: portada a pantalla completa,
   carrusel editorial de experiencias, mosaico de destinos,
   accesos a Tours/Travesías/Paquetes, "Quiénes somos" con el
   equipo, comentarios y su lienzo de fondo.
   ========================================================= */

/* Hero de Inicio — portada real a pantalla completa (100dvh), marca
   centrada como ancla visual. Sin overlay sobre la foto: sólo una
   franja sutil detrás de la navbar (::before) para su legibilidad. */
.hero-inicio{position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding-bottom:3vh; overflow:hidden;}
/* min-height (no height): en pantallas normales el contenido queda
   centrado exactamente igual que antes; en pantallas bajas el hero
   crece en vez de recortar logo/CTAs. El padding-superior de 100px
   viene de la regla global "section" (más abajo) y deja libre el
   header fijo (~74px); en <=860px pasa a 64px y se fija en 74px más
   abajo, compensando el padding-inferior para no mover el centrado. */
/* La foto no corta en seco: se desvanece (mask, no un rectángulo negro)
   sobre su ~18% inferior y deja ver, a través suyo, el mismo lienzo de
   <main> en el que "aterriza" Principales destinos — es la MISMA
   superficie, no un color imitado. Por eso .hero-inicio no tiene
   background propio: si lo tuviera, taparía el lienzo de main. */
.hero-inicio-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; mask-image:linear-gradient(180deg, black 0%, black 90%, transparent 100%); -webkit-mask-image:linear-gradient(180deg, black 0%, black 90%, transparent 100%);}
/* Franja muy sutil, sólo detrás de la navbar: la foto de Inicio tiene
   cielo/nubes claras en su parte superior y la navegación transparente
   pierde contraste ahí. No es un overlay sobre toda la foto — se
   desvanece a los ~160px y el resto de la composición queda intacta. */
.hero-inicio::before{content:""; position:absolute; inset:0 0 auto 0; height:160px; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(var(--verde-rgb),0.45) 0%, rgba(var(--verde-rgb),0) 100%);}
/* Bloque simple (no flex): con flex-column + align-items:center cada
   hijo de texto toma su ancho "fit-content" y puede crecer más que el
   espacio disponible, recortándose contra el overflow:hidden del hero
   en pantallas angostas. Un bloque normal + text-align:center evita
   ese problema y wrappea el texto correctamente. */
/* Mismo contenedor horizontal que nav/.wrap (--content-max + --gutter):
   antes tenía su propio max-width:820px/padding:40px, un eje distinto
   al del resto del sitio (navbar, CTA band, etc). */
.hero-inicio-content{position:relative; z-index:2; padding:0 var(--gutter); max-width:var(--content-max); margin:0 auto; width:100%; color:var(--color-blanco); text-align:center; box-sizing:border-box;}
/* El logo vuelve a ser la pieza dominante y centrada del Hero; el
   tagline pasa a acompañamiento tipográfico menor debajo, con una
   distinción sutil (itálica) respecto del resto de textos del sitio. */
.hero-inicio-logo{display:block; height:clamp(215px,27vw,400px); height:clamp(150px, min(27vw, 100dvh - 3vh - 316px), 400px); width:auto; margin-left:auto; margin-right:auto; filter:drop-shadow(0 10px 30px rgba(var(--black-rgb),0.45)); margin-bottom:var(--space-6);}
/* Ancho completo (no max-width acotado) para que el texto quede
   centrado sobre el mismo eje que el logo, como un único bloque
   visual — un max-width angosto sin margin:auto desplazaba la caja
   hacia la izquierda en vez de centrarla. */
/* El archivo del logo (logo-amarillo.png) no tiene el dibujo centrado
   en su propio lienzo: le sobra margen a la izquierda, así que su
   centro visual (la tinta) cae unos px a la derecha del centro real
   de la caja. Se compensa acá, en el texto, para que ambos queden
   alineados sobre el mismo eje visual — el logo no se toca. */
.hero-inicio-tagline{display:block; font-family:var(--font-heading); font-weight:600; font-style:italic; letter-spacing:0.07em; font-size:clamp(17px,2.1vw,23px); line-height:1.35; color:rgba(var(--crema-rgb),0.92); white-space:normal; width:100%; margin:0; text-shadow:0 2px 14px rgba(var(--black-rgb),0.55); transform:translateX(0.7%);}
.hero-inicio-tagline::before,
.hero-inicio-tagline::after{content:""; display:inline-block; vertical-align:middle; width:52px; height:1.5px; background:rgba(var(--crema-rgb),0.55); margin:0 20px;}
/* CTAs claramente separados del bloque logo+tagline, aprovechando el
   espacio de la foto hacia abajo — misma pareja editorial de antes
   (píldora sólida + link subrayado), sólo cambia la separación. */
.hero-inicio .hero-ctas{gap:28px; align-items:center; justify-content:center; margin-top:var(--space-9);}
.hero-inicio .btn{font-family:var(--font-heading); padding:var(--btn-pad-lg); font-size:var(--text-md); letter-spacing:var(--tracking-ui); display:inline-flex; align-items:center; gap:10px;}
.hero-inicio .btn::after{content:"→"; transition:transform var(--duration-base) var(--ease);}
.hero-inicio .btn:hover::after{transform:translateX(4px);}
.hero-inicio .btn-outline{background:none; border:none; padding:0 0 5px; border-bottom:1px solid rgba(var(--amarillo-rgb),0.45); border-radius:0; color:var(--color-accent-2); font-family:var(--font-heading); font-weight:700; font-size:var(--text-md); letter-spacing:var(--tracking-ui); display:inline-flex; align-items:center; gap:8px; text-shadow:0 2px 8px rgba(var(--black-rgb),0.5); transition:border-color var(--duration-base) var(--ease);}
.hero-inicio .btn-outline::after{content:"→"; transition:transform var(--duration-base) var(--ease);}
.hero-inicio .btn-outline:hover{background:none; color:var(--color-accent-2); border-bottom-color:var(--color-accent-2); transform:none;}
.hero-inicio .btn-outline:hover::after{transform:translateX(4px);}
/* Home — la foto de "Quiénes somos" gana proporción editorial (retrato,
   no una caja panorámica de altura fija) y el texto pasa a ser la
   columna dominante; Nosotros conserva su propio .about intacto. */
body[data-page="inicio"] .about-grid{grid-template-columns:0.9fr 1.1fr; gap:var(--space-8);}
body[data-page="inicio"] .about h2{font-size:clamp(34px,4.5vw,52px); line-height:1.05; max-width:520px;}
body[data-page="inicio"] .about-photo{border-radius:var(--radius-organic-lg); overflow:hidden; aspect-ratio:0.82; box-shadow:var(--shadow-sm);}
body[data-page="inicio"] .about-photo img{width:100%; height:100%; object-fit:cover; display:block;}
body[data-page="inicio"] .about p{margin-top:var(--space-4); font-size:var(--text-lg); line-height:1.7; max-width:460px;}
body[data-page="inicio"] .about p + p{margin-top:var(--space-3);}
/* Home — versión compacta de la grilla de equipo que ya existe completa
   en nosotros.html (mismo lenguaje: foto orgánica + nombre + rol/
   descripción pendientes), integrada dentro de la propia sección
   "Quiénes somos" en vez de ser un bloque nuevo. Fotos más chicas y
   cuadradas (acá prioriza reconocer a las personas rápido, no
   protagonismo de foto) y con el mismo radio asimétrico que ya usa
   .about-photo en esta página. */
/* .equipo-mini vive en su propio .wrap (misma clase/mismo --content-max
   que .about-grid arriba), así que NO se le pone un max-width propio a
   la grilla: debe llenar el mismo ancho que foto+contenido para
   compartir eje izquierdo/derecho con la composición de arriba, no un
   bloque angosto flotando adentro. El CTA se centra respecto de ese
   mismo ancho (text-align en el wrap, revertido adentro de la grilla
   para no centrar los nombres/textos de cada persona). */
body[data-page="inicio"] .equipo-mini{margin-top:var(--space-8); text-align:center;}
body[data-page="inicio"] .equipo-mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); text-align:left;}
body[data-page="inicio"] .equipo-mini-persona{margin:0;}
body[data-page="inicio"] .equipo-mini-foto{position:relative; aspect-ratio:1; border-radius:var(--radius-organic-lg); overflow:hidden; box-shadow:var(--shadow-sm);}
body[data-page="inicio"] .equipo-mini-foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
body[data-page="inicio"] .equipo-mini-persona:hover .equipo-mini-foto img{transform:scale(1.04);}
body[data-page="inicio"] .equipo-mini-persona figcaption{margin-top:var(--space-3);}
body[data-page="inicio"] .equipo-mini-persona h3{font-size:17px; color:var(--text-primary);}
body[data-page="inicio"] .equipo-mini-cta{display:inline-block; margin-top:var(--space-6);}
/* Home — lienzo de fondo, segunda combinación: marfil/arena (Destinos),
   salvia/petróleo — nota fría deliberada para diferenciar Catálogo de
   Destinos — (Catálogo), terracota/arcilla (Quiénes somos, la mancha más
   grande de las cuatro: es el punto donde pedieron una transición con
   más presencia hacia Catálogo) y de nuevo marfil/arena para Comentarios
   (mismo recurso que Destinos pero en dirección/posición distinta, para
   no repetir el mismo efecto). Radial-gradients grandes y superpuestos
   (no linear-gradient, no franjas): cada mancha empieza en una sección y
   se apaga ya entrada la siguiente. El hero y el cta-band/footer pintan
   su propio fondo opaco encima, así que esto no se ve detrás de ellos. */
body[data-page="inicio"] main{
  background-color:var(--canvas-base);
  background-repeat:no-repeat;
  background-image:
    radial-gradient(72% 48% at 20% 26%, rgba(var(--crema-rgb),0.16) 0%, transparent 100%),
    radial-gradient(62% 42% at 84% 34%, rgba(var(--amarillo-rgb),0.14) 0%, transparent 100%),
    radial-gradient(70% 46% at 86% 48%, rgba(var(--celeste-rgb),0.16) 0%, transparent 100%),
    radial-gradient(64% 42% at 16% 56%, rgba(var(--verde-comp-rgb),0.4) 0%, transparent 100%),
    radial-gradient(74% 48% at 22% 68%, rgba(var(--marron-rgb),0.16) 0%, transparent 100%),
    radial-gradient(50% 34% at 74% 72%, rgba(var(--naranja-rgb),0.1) 0%, transparent 100%),
    radial-gradient(62% 40% at 78% 86%, rgba(var(--crema-rgb),0.14) 0%, transparent 100%),
    radial-gradient(58% 38% at 22% 92%, rgba(var(--amarillo-rgb),0.12) 0%, transparent 100%);
  background-size:100% 100%;
  background-position:0 0;
}
/* Home — superficie continua real: Destinos, Catálogo, Quiénes somos y
   Comentarios NO tienen fondo propio (transparent). Lo que se ve detrás
   es la composición orgánica pintada una sola vez en <main> (regla
   anterior, "Home — lienzo de fondo"), que no respeta límites de sección:
   una mancha de color puede empezar en Destinos y terminar en Catálogo.
   El texto vuelve a sus colores de siempre (la base sigue siendo clara). */
body[data-page="inicio"] .destinos,
body[data-page="inicio"] .catalogo-home,
body[data-page="inicio"] .about,
body[data-page="inicio"] .testi{background:transparent;}
body[data-page="inicio"] .catalogo-home{padding-top:var(--space-6);}
/* Tours/Travesías/Paquetes es una capa de orientación ("cómo viajar"),
   no un segundo catálogo de peso equivalente a Experiencias: encabezado
   más chico y más angosto que el resto de las secciones del Home. */
body[data-page="inicio"] .catalogo-home .section-head{max-width:560px;}
body[data-page="inicio"] .catalogo-home .section-head h2{font-size:clamp(26px,3.4vw,36px);}
body[data-page="inicio"] .catalogo-home .valores-grid{grid-template-columns:1.3fr 1fr 1fr;}
/* Tours/Travesías/Paquetes en Inicio — la foto manda: se saca la
   descripción larga y el "Ver más →" queda oculto hasta el hover, así
   la tarjeta en reposo es sólo categoría + frase corta, sin bloque de
   texto compitiendo con la imagen. */
body[data-page="inicio"] .catalogo-home .dest-card{height:400px; border-radius:var(--radius-lg); transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);}
body[data-page="inicio"] .catalogo-home .dest-card:hover{box-shadow:var(--shadow-lg);}
body[data-page="inicio"] .catalogo-home .dest-card.catalogo-feature{border-radius:var(--radius-organic-lg);}
body[data-page="inicio"] .catalogo-home .dest-card:nth-child(2){transform:translateY(30px); border-radius:var(--radius-organic-lg-r);}
body[data-page="inicio"] .catalogo-home .dest-card:nth-child(2):hover{transform:translateY(24px);}
body[data-page="inicio"] .catalogo-home .dest-card:nth-child(3){transform:translateY(-14px); border-radius:var(--radius-organic-lg-r);}
body[data-page="inicio"] .catalogo-home .dest-card:nth-child(3):hover{transform:translateY(-20px);}
body[data-page="inicio"] .catalogo-home .dest-card .tag{font-size:var(--text-2xs); margin-bottom:4px;}
body[data-page="inicio"] .catalogo-home .dest-card h3{font-size:19px; line-height:1.25;}
body[data-page="inicio"] .catalogo-home .dest-card p{display:none;}
body[data-page="inicio"] .catalogo-home .dest-card .count{opacity:0; transform:translateY(4px); margin-top:6px; transition:opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);}
body[data-page="inicio"] .catalogo-home .dest-card:hover .count{opacity:1; transform:translateY(0);}
@media (hover: none){
  body[data-page="inicio"] .catalogo-home .dest-card .count{opacity:1; transform:none;}
}
/* Home — "Nuestros destinos" como mosaico editorial (1 foto protagonista +
   2 apiladas), no 3 cajas iguales. Misma data/links de DESTINOS, sólo
   cambia la composición vía :nth-child. */
/* Cusco protagonista: foto vertical grande a la izquierda (retrato,
   dramática), Patagonia y Norte Argentino la acompañan en horizontal
   a la derecha con alturas desiguales — ni cuadrados iguales ni
   simetría perfecta. Texto anclado abajo (misma lógica editorial que
   Catálogo), no centrado sobre la foto. */
#destinos-home{grid-template-columns:1.75fr 1fr; grid-template-rows:0.85fr 1.15fr; gap:var(--space-5); height:660px;}
#destinos-home .dest-card{height:100%; transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);}
#destinos-home .dest-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px);}
#destinos-home .dest-card:first-child{grid-row:1 / 3; border-radius:var(--radius-organic-lg); margin-top:-14px;}
#destinos-home .dest-card:first-child h3{font-size:34px;}
#destinos-home .dest-card:not(:first-child){border-radius:var(--radius-organic-lg-r);}
/* Bariloche (destino-patagonia.jpg): la foto tiene cielo despejado en
   su mitad superior; en esta card apaisada el imagen_pos de Supabase
   (pensado para destinos.html/destino.html) deja el texto sobre esa
   zona clara. Sólo esta card de Inicio conserva el encuadre bajo; el
   resto usa imagen_pos. !important porque imagen_pos va inline. */
#destinos-home .dest-card[href*="destino=bariloche"] img{object-position:center 70% !important;}
#destinos-home .dest-card:nth-child(3){transform:translate(14px,14px);}
#destinos-home .dest-card:nth-child(3):hover{transform:translate(14px,10px);}
#destinos-home .dest-card .info{padding:28px 26px;}
/* ---------- Experiencias — carrusel de Inicio ----------
   Pieza editorial: una fotografía grande por slide (no la grilla
   .exp-card que usa el resto del sitio) con nombre + tipo/duración
   integrados sobre la imagen, sin caja ni sombra de card alrededor.
   Navegación editorial (contador "01 / 06" + flechas de texto) en vez
   de flechas circulares o dots — ver assets/js/pages/inicio.js. */
body[data-page="inicio"] .exp-home{padding-top:var(--space-9); padding-bottom:var(--space-8); position:relative;}
/* Experiencias es el bloque de mayor peso entre los comerciales del
   Home: encabezado más ancho y más grande que el resto (Destinos y
   Catálogo usan el tamaño por defecto), para que se lea como
   protagonista sin tocar el componente en sí. */
body[data-page="inicio"] .exp-home .section-head{max-width:760px;}
body[data-page="inicio"] .exp-home .section-head h2{font-size:clamp(32px,4.6vw,52px);}
body[data-page="inicio"] .destinos{padding-top:var(--space-8);}
body[data-page="inicio"] .exp-carousel{position:relative; margin-top:26px;}
/* Riel infinito (se duplica y hace loop, ver assets/js/pages/inicio.js):
   siempre hay más contenido a ambos lados, así que el fundido lateral
   queda fijo. En desktop el ancho del slide (min(820px,72vw)) deja ver
   un margen del siguiente; en mobile baja a 76vw para el mismo efecto. */
body[data-page="inicio"] .exp-carousel-viewport{position:relative; overflow-x:auto; scroll-behavior:auto; scrollbar-width:none; -ms-overflow-style:none; padding:6px 2px;
  mask-image:linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
}
body[data-page="inicio"] .exp-carousel-viewport::-webkit-scrollbar{display:none;}
/* padding-inline centra la experiencia activa: mismo cálculo que el
   ancho del slide (mitad del viewport menos la mitad del slide), así
   el slide activo queda al medio con el mismo peek a ambos lados. */
body[data-page="inicio"] .exp-carousel-track{display:flex; gap:22px; width:max-content; padding-inline:calc(50% - min(410px,36vw));}
body[data-page="inicio"] .exp-feature{flex:0 0 auto; width:min(820px,72vw);}
body[data-page="inicio"] .exp-feature-frame{position:relative; display:block; aspect-ratio:16/9.5; border-radius:8px; overflow:hidden;}
body[data-page="inicio"] .exp-feature-frame img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease;}
body[data-page="inicio"] .exp-feature:hover .exp-feature-frame img{transform:scale(1.035);}
body[data-page="inicio"] .exp-feature-info{position:absolute; left:0; right:0; bottom:0; padding:30px 32px 24px; background:linear-gradient(180deg, rgba(1,22,15,0) 0%, rgba(1,18,12,0.5) 42%, rgba(1,14,10,0.88) 100%); color:var(--color-blanco);}
body[data-page="inicio"] .exp-feature-tag{display:inline-block; font-family:var(--font-body); font-weight:600; font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:0.14em; color:var(--color-accent-2); margin-bottom:10px;}
body[data-page="inicio"] .exp-feature-info h3{font-family:var(--font-heading); font-weight:600; font-size:clamp(22px,2.6vw,32px); line-height:1.08; margin:0 0 8px; text-shadow:0 2px 10px rgba(var(--black-rgb),0.35);}
body[data-page="inicio"] .exp-feature-info p{margin:0; font-family:var(--font-body); font-size:var(--text-sm); letter-spacing:0.06em; text-transform:uppercase; color:rgba(var(--white-rgb),0.82);}
body[data-page="inicio"] .exp-carousel-nav{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:20px;}
/* Área clickeable de 44x44 (accesible en mobile) sin caja/círculo
   visible: sólo la flecha tipográfica, mismo lenguaje editorial. */
body[data-page="inicio"] .exp-nav-arrow{background:none; border:none; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:var(--text-3xl); line-height:1; color:var(--text-secondary); cursor:pointer; transition:color .2s ease, transform .2s ease;}
body[data-page="inicio"] .exp-nav-arrow:hover{color:var(--color-accent);}
body[data-page="inicio"] .exp-nav-arrow.prev:hover{transform:translateX(-3px);}
body[data-page="inicio"] .exp-nav-arrow.next:hover{transform:translateX(3px);}
body[data-page="inicio"] .exp-nav-counter{font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:var(--tracking-wide); color:var(--text-secondary); font-variant-numeric:tabular-nums;}
@media (max-width:640px){
  body[data-page="inicio"] .exp-feature{width:76vw;}
  body[data-page="inicio"] .exp-feature-frame{aspect-ratio:4/3.4;}
  body[data-page="inicio"] .exp-feature-info{padding:22px 20px 18px;}
  /* Gap chico a propósito: con el peek del centrado, un gap grande
       "se come" el margen y el slide vecino queda tapado por el hueco
       en vez de asomar. */
  body[data-page="inicio"] .exp-carousel-track{gap:6px; padding-inline:calc(50% - 38vw);}
}
/* Inicio: entrada editorial breve hacia Comunidad Raíces (galeria.html).
   Reutiliza .comunidad-grid/.comunidad-stack tal cual (mismas fotos,
   misma composición) — sólo cambia el fondo (transparente = verde base
   en vez del amarillo de .comunidad) y no incluye el formulario de
   envío de fotos, que vive únicamente en Galería. */
.comunidad-inicio{background:transparent;}
.comunidad-inicio .section-head{margin-bottom:32px;}
/* Home — Comentarios cierra el recorrido cálido: entra desde el tono
   tierra de Quiénes somos y se asienta en el amarillo de marca (no es
   un bloque de color nuevo, es el final de la misma transición). */
body[data-page="inicio"] .testi{background:transparent; color:var(--text-primary);}
@media (max-width: 960px){
  #destinos-home{grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:auto; height:auto; gap:var(--space-4);}
  #destinos-home .dest-card{height:auto; aspect-ratio:1.5;}
  #destinos-home .dest-card:first-child{grid-row:auto; aspect-ratio:1.3; margin-top:0;}
  #destinos-home .dest-card:nth-child(3),
  #destinos-home .dest-card:nth-child(3):hover{transform:none;}
}
@media (max-width: 860px){
  body[data-page="inicio"] .about-grid{grid-template-columns:1fr; gap:var(--space-6);}
  body[data-page="inicio"] .about-photo{aspect-ratio:1.3;}
  body[data-page="inicio"] .equipo-mini-grid{grid-template-columns:repeat(2,1fr); gap:var(--space-4);}
  .hero-inicio{padding-top:74px; padding-bottom:calc(6vh + 10px);}
  .hero-inicio-logo{height:clamp(110px,22vw,210px); height:clamp(110px, min(22vw, 100dvh - 6vh - 291px), 210px);}
  .hero-inicio-tagline{margin:var(--space-6) 0 var(--space-7);}
  body[data-page="inicio"] .catalogo-home .valores-grid{grid-template-columns:1fr;}
  body[data-page="inicio"] .catalogo-home .dest-card:nth-child(2),
  body[data-page="inicio"] .catalogo-home .dest-card:nth-child(2):hover,
  body[data-page="inicio"] .catalogo-home .dest-card:nth-child(3),
  body[data-page="inicio"] .catalogo-home .dest-card:nth-child(3):hover{transform:none;}
}
@media (max-width: 640px){
  .hero-inicio{padding-bottom:calc(5vh + 10px);}
  .hero-inicio-content{padding:0 var(--gutter-mobile);}
  .hero-inicio-logo{height:clamp(92px,32vw,160px); height:clamp(92px, min(32vw, 100dvh - 5vh - 356px), 160px);}
  .hero-inicio-tagline{white-space:normal; font-size:17px; letter-spacing:0.04em; margin:var(--space-5) 0 var(--space-6);}
  .hero-inicio-tagline::before,
  .hero-inicio-tagline::after{width:24px; margin:0 10px;}
  .hero-inicio .hero-ctas{gap:18px; flex-direction:column; width:100%; max-width:300px; margin-left:auto; margin-right:auto;}
  .hero-inicio .hero-ctas .btn:not(.btn-outline){width:100%; justify-content:center; padding:15px 28px;}
  .hero-inicio .hero-ctas .btn-outline{padding-bottom:4px;}
  body[data-page="inicio"] .equipo-mini{margin-top:var(--space-6);}
  body[data-page="inicio"] .equipo-mini-grid{grid-template-columns:1fr; gap:var(--space-5);}
}