/* Explora: coleccion editorial (hub + 3 piezas). Capa de CSS compartida por
   las 4 paginas de la coleccion (mismo patron que politica-de-privacidad.css/
   libro-reclamaciones.css: una capa por coleccion, no una por pagina).
   Reutiliza exclusivamente tokens ya definidos en variables.css/base.css/
   components.css/sections.css -- ningun color, radio, tipografia ni
   breakpoint nuevo se introduce aqui. */

/* Hero de cada pagina (mismo patron que .privacy-hero) */
.explora-hero{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.explora-hero h1{font-size:clamp(2.4rem,5.5vw,3.6rem);margin:.8rem 0 1rem}
.explora-hero .lead{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.2rem);max-width:52ch}

/* Columna de lectura. .explora-content ya lleva la clase .wrap en el HTML
   (mismo eje/centrado/padding-inline que el header y el hero de Home, ver
   .wrap en base.css) -- por eso YA NO se redeclara max-width/margin-inline
   aqui: hacerlo (como antes) generaba una caja de 760px centrada de forma
   independiente en todo el viewport, desconectada del eje de 1240px
   (--maxw) que usa el resto del sitio -- esa era la causa real del
   desplazamiento hacia la derecha. El ancho de lectura y la indentacion
   editorial se aplican ahora en los hijos directos, que por eso heredan el
   mismo borde izquierdo que el eyebrow/H1 del hero (mismo .wrap). */
.explora-content{padding-bottom:clamp(3.5rem,7vw,6.5rem)}
.explora-content > *{
  max-width:760px;
  /* Misma formula que usa .wrap para su propio padding-inline (base.css):
     la indentacion editorial queda matematicamente derivada del mismo
     container principal, no es un valor nuevo. En mobile (<=960px, ver
     media query mas abajo) se reduce a 0: un unico eje izquierdo. */
  margin-inline-start:clamp(1.25rem,4vw,3rem);
}
.explora-content > .explora-block{margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.explora-content h2{
  font-family:var(--display);font-weight:600;line-height:1.15;
  font-size:clamp(1.6rem,3vw,2.1rem);color:var(--pine);margin-bottom:1rem;
}
.explora-content h3{
  font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--ink);
  margin-bottom:.5rem;
}
.explora-content p{color:var(--ink);margin-bottom:1rem;max-width:66ch}
.explora-content p:last-child{margin-bottom:0}
/* :not(.btn) evita que este color/underline genericos de enlace en prosa
   sobrescriban .btn-primary (mismo color que su propio fondo var(--pine)
   -> texto invisible sobre el pill). Bug real, no cosmetico: ver auditoria. */
.explora-content a:not(.btn){color:var(--pine);font-weight:600;text-decoration:underline}

/* Respuesta GEO principal: destacada visualmente, siempre HTML real (nunca
   dentro de imagen/canvas/JS), pensada para poder recuperarse fuera de
   contexto. Usa unicamente tokens existentes (surface + acento clay). */
.explora-answer{
  background:var(--surface);border-left:3px solid var(--clay);
  border-radius:var(--r-card);padding:clamp(1.4rem,3vw,1.9rem) clamp(1.5rem,3vw,2rem);
  font-size:1.08rem;color:var(--ink);
}
.explora-answer p{margin-bottom:0;max-width:none}

/* Introduccion editorial del hub */
.explora-intro-list{margin:1.2rem 0 1.2rem 1.2rem;color:var(--muted)}
.explora-intro-list li{margin-bottom:.5rem}

/* Escenarios / bloques escaneables (grid de tarjetas ligeras, sin imagen) */
.explora-scenarios{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin:1.6rem 0}
.explora-scenario{
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.3rem 1.4rem;background:var(--paper);
}
/* La 5ta situacion ("Algo ya no encaja") es impar en una grilla de 2
   columnas: sin esto dejaria una celda vacia a su derecha en desktop. En
   mobile (1 columna, ver @media(max-width:960px) mas abajo) el span 1/-1
   equivale simplemente a la unica columna existente -- ancho normal. */
.explora-scenario:nth-child(5){grid-column:1/-1}
.explora-scenario h3{font-size:1.05rem;margin-bottom:.35rem}
.explora-scenario p{font-size:.95rem;color:var(--muted);margin-bottom:0}

/* Secuencia numerada propia (no reutiliza .steps/.step: esa clase depende
   de #processStage + js/process.js para levantar `opacity:.45` en desktop;
   fuera de ese scaffolding quedaria atenuada permanentemente). Lista
   vertical, valida para cualquier cantidad de items (4 o 5), con la misma
   animacion de entrada del resto del sitio via .reveal). */
.explora-steps{margin:1.6rem 0}
.explora-step{
  border-top:1px solid var(--line);padding:1.3rem 0;
  display:grid;grid-template-columns:3.5rem 1fr;gap:1rem;align-items:start;
}
.explora-step:first-child{border-top:none;padding-top:0}
.explora-step .n{font-family:var(--display);font-size:1.9rem;color:var(--clay-text);line-height:1}
.explora-step h3{margin-bottom:.35rem}
.explora-step p{margin-bottom:0}

/* Comparacion de 2 columnas (mismo patron de colapso que .contact-grid/
   .services: 2 columnas en desktop, 1 en mobile/tablet, breakpoint 960px
   ya existente en responsive.css) */
.explora-compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,2.5rem);margin:1.6rem 0}
.explora-compare-col{
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.5rem 1.6rem;background:var(--paper);
}
.explora-compare-col h3{color:var(--pine);margin-bottom:.8rem}
.explora-compare-col ul{margin:0;padding-left:1.2rem;color:var(--ink)}
.explora-compare-col li{margin-bottom:.5rem}
.explora-compare-col li:last-child{margin-bottom:0}

/* Enfasis puntual (p.ej. "No." en "¿Tengo que prepararme?") */
.explora-emphasis{
  font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5vw,3rem);
  color:var(--pine);margin:.4rem 0 1rem;
}

/* Sigue explorando: enlace editorial a la siguiente pieza (categoria +
   titulo + descripcion + enlace descriptivo), sin caja/tarjeta -- ligero,
   coherente con el resto del contenido de .explora-content. */
.explora-related{
  border-top:1px solid var(--line);padding-top:clamp(1.8rem,4vw,2.4rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.explora-related-kicker{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:.9rem;
}
.explora-related .eyebrow{display:block;margin-bottom:.4rem}
.explora-related h3{margin-top:0}

/* CTA de cierre de cada pagina */
.explora-cta{max-width:56ch}
.explora-cta h2{margin-bottom:.6rem}
.explora-cta p{color:var(--muted);margin-bottom:1.5rem}

/* Hub: encabezado + introduccion + coleccion de 3 piezas */
.explora-hub-intro{max-width:760px;margin:0 auto clamp(2.5rem,5vw,3.5rem)}
.explora-hub-intro h2{
  font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.1rem);
  color:var(--pine);margin-bottom:1rem;
}
.explora-hub-intro p{color:var(--ink);margin-bottom:1rem;max-width:66ch}
.explora-hub-intro p:last-child{margin-bottom:0}

/* Composicion de la coleccion: sin fotografia (no existe un recurso visual
   real por pieza -- ver informe); el ritmo viene de la tipografia y de un
   numeral editorial de gran escala, alternando de lado en filas impares/
   pares, no de imagenes genericas. */
.explora-collection{padding-bottom:clamp(3rem,6vw,5rem)}
.explora-piece{
  display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:center;padding:clamp(2rem,4vw,3rem) 0;
  border-top:1px solid var(--line);
}
.explora-piece:first-child{border-top:none}
.explora-piece:nth-child(even){grid-template-columns:1.6fr 1fr}
.explora-piece:nth-child(even) .explora-piece-num{order:2}
.explora-piece-num{
  font-family:var(--display);font-weight:600;line-height:.9;
  font-size:clamp(4rem,10vw,7rem);color:var(--surface-2);
}
.explora-piece-eyebrow{display:block;margin-bottom:.5rem}
.explora-piece h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.7rem}
.explora-piece p{color:var(--muted);margin-bottom:1.2rem;max-width:52ch}

/* =========================================================================
   Ampliacion hub tematico (fase EXPLORA_SEO_GEO). Mismas reglas que el resto
   de esta capa: ningun color/radio/tipografia/breakpoint nuevo -- todo se
   deriva de variables.css y del breakpoint 960px ya existente.
   ========================================================================= */

/* Breadcrumb visible (par de datos estructurados BreadcrumbList en el HTML).
   Comparte eje con el hero: se coloca dentro de .wrap, encima del .explora-hero. */
.explora-breadcrumb{
  padding-top:clamp(1.2rem,3vw,1.8rem);
  font-size:.85rem;color:var(--muted);
}
.explora-breadcrumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
}
.explora-breadcrumb li{display:flex;align-items:center;gap:.5rem}
.explora-breadcrumb li+li::before{content:"\203A";color:var(--line);font-weight:600}
.explora-breadcrumb a{color:var(--muted);text-decoration:none}
.explora-breadcrumb a:hover{color:var(--pine);text-decoration:underline}
.explora-breadcrumb [aria-current="page"]{color:var(--ink)}

/* Navegacion por categorias del hub: fila de anclas a cada cluster. */
.explora-catnav{
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin:0 auto clamp(2.5rem,5vw,3.5rem);max-width:760px;
}
.explora-catnav a{
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.5rem 1rem;font-size:.9rem;color:var(--pine);
  text-decoration:none;background:var(--paper);
}
.explora-catnav a:hover{background:var(--surface);border-color:var(--clay)}

/* Cluster tematico: eyebrow + titulo + descripcion + lista de piezas. */
.explora-cluster{
  max-width:760px;margin:0 auto;
  padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line);
  scroll-margin-top:6rem;
}
.explora-cluster:first-of-type{border-top:none}
.explora-cluster > .eyebrow{display:block;margin-bottom:.5rem}
.explora-cluster h2{
  font-family:var(--display);font-weight:600;line-height:1.15;
  font-size:clamp(1.6rem,3vw,2.1rem);color:var(--pine);margin-bottom:.7rem;
}
.explora-cluster > p{color:var(--ink);max-width:66ch;margin-bottom:1.4rem}

.explora-cluster-list{display:grid;gap:1px;background:var(--line);border-radius:var(--r-card);overflow:hidden}
.explora-piece-link{
  display:block;background:var(--paper);padding:1.2rem 1.4rem;
  text-decoration:none;color:inherit;
}
.explora-piece-link:hover{background:var(--surface)}
.explora-piece-link h3{
  font-family:var(--display);font-weight:600;font-size:1.2rem;color:var(--ink);
  margin-bottom:.3rem;
}
.explora-piece-link p{color:var(--muted);font-size:.95rem;margin:0;max-width:60ch}
.explora-piece-link .arrow{color:var(--clay-text)}

/* Bloque "Proximamente": el resto del mapa de clusters como texto, sin
   secciones ancladas ni enlaces (no crea paginas/anclas de categoria vacias). */
.explora-upcoming{
  max-width:760px;margin:0 auto;
  padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line);
}
.explora-upcoming h2{
  font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.6vw,1.8rem);
  color:var(--pine);margin-bottom:.7rem;
}
.explora-upcoming p{color:var(--muted);max-width:66ch;margin-bottom:1rem}
.explora-upcoming ul{margin:0;padding-left:1.2rem;color:var(--muted)}
.explora-upcoming li{margin-bottom:.4rem}
.explora-upcoming li b{color:var(--ink);font-weight:600}

/* FAQ (acompanado de FAQPage; preguntas/respuestas siempre visibles). */
.explora-faq{max-width:760px;margin:0 auto}
.explora-faq-item{border-top:1px solid var(--line);padding:1.3rem 0}
.explora-faq-item:first-of-type{border-top:none}
.explora-faq-item h3{
  font-family:var(--display);font-weight:600;font-size:1.2rem;color:var(--ink);
  margin-bottom:.4rem;
}
.explora-faq-item p{color:var(--ink);margin:0;max-width:66ch}

@media(max-width:960px){
  .explora-scenarios{grid-template-columns:1fr}
  .explora-compare{grid-template-columns:1fr}
  .explora-piece,
  .explora-piece:nth-child(even){grid-template-columns:1fr;text-align:left}
  .explora-piece-num{order:0!important;font-size:3rem}
  .explora-catnav,.explora-cluster,.explora-upcoming,.explora-faq{margin-inline-start:0}
  /* Transicion intro -> primera pieza: en mobile el margen inferior de la
     intro (min. del clamp desktop) se sumaba al padding-top propio de
     .explora-piece, resultando en un salto excesivo. Solo se reduce esta
     transicion puntual; el ritmo entre piezas y el desktop no se tocan. */
  .explora-hub-intro{margin-bottom:1.5rem}
  /* Paginas interiores: elimina la indentacion editorial en mobile -- un
     unico eje izquierdo (eyebrow/H1/bajada y cuerpo comparten el mismo
     borde, el de .wrap). */
  .explora-content > *{margin-inline-start:0}
}

/* =========================================================================
   Rail lateral del hub /explora (fase EXPLORA_SEO_GEO, 2a iteracion).
   Aprovecha el gutter izquierdo en pantallas anchas como indice fijo de
   categorias, con scroll-spy (js/explora-hub.js) que ademas sombrea la
   seccion visible. Excepcion documentada a la regla "sin breakpoints nuevos"
   de esta capa: se necesita UNA media query desktop-up (1300px) porque por
   debajo de ese ancho el gutter no da para el rail sin pisar la columna de
   lectura de 760px. Sigue sin introducir colores, radios ni tipografias
   nuevas -- todo sale de variables.css.
   ========================================================================= */
.explora-rail{display:none}
.explora-cluster{transition:background .3s var(--ease),padding .3s var(--ease)}

.explora-rail-kicker{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:0 0 .9rem .1rem;
}
.explora-rail ul{list-style:none;margin:0 0 1.4rem;padding:0}
.explora-rail li a{
  display:block;padding:.6rem .9rem;border-radius:var(--r-card);
  text-decoration:none;color:var(--ink);border:1px solid transparent;
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
.explora-rail li a .k{
  display:block;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--clay-text);font-weight:600;margin-bottom:.12rem;
}
.explora-rail li a:hover{background:var(--paper);border-color:var(--line)}
.explora-rail li a.is-active{
  background:var(--surface);border-color:var(--clay);
  font-family:var(--display);font-weight:600;
}
.explora-rail-cta{
  display:inline-block;margin-left:.1rem;padding:.55rem 1.1rem;
  border-radius:var(--r-pill);background:var(--pine);color:var(--paper);
  text-decoration:none;font-size:.88rem;font-weight:600;
}
.explora-rail-cta:hover{filter:brightness(1.08)}

@media(min-width:1300px){
  .explora-hub-grid{display:grid;grid-template-columns:1fr minmax(0,760px) 1fr;align-items:start}
  .explora-hub-grid > .explora-rail{
    grid-column:1;justify-self:end;align-self:start;
    position:sticky;top:6.5rem;width:236px;margin-right:2.5rem;display:block;
  }
  .explora-hub-grid > .explora-hub-main{grid-column:2;min-width:0}
  /* la fila de pills es redundante con el rail en desktop ancho */
  .explora-hub-main > .explora-catnav{display:none}
  .explora-hub-main > .explora-hub-intro,
  .explora-hub-main > .explora-cluster,
  .explora-hub-main > .explora-cta{margin-left:0;margin-right:0;max-width:none}
  /* sombreado de la seccion en la que esta el lector */
  .explora-cluster.is-current{
    background:var(--surface);border-radius:var(--r-card);
    padding-left:1.4rem;padding-right:1.4rem;margin-left:-1.4rem;margin-right:-1.4rem;
    border-top-color:transparent;
  }
}

/* =========================================================================
   Bloque de autora al pie de cada articulo generado (build-explora.mjs
   AUTHOR_BLOCK). Refuerza E-E-A-T y la asociacion Persona <-> contenido.
   Sin colores/radios/tipografias nuevas -- todo de variables.css.
   ========================================================================= */
.explora-author{
  max-width:760px;margin:2.5rem auto 0;padding-top:1.8rem;
  border-top:1px solid var(--line);
  display:flex;gap:1.2rem;align-items:flex-start;
}
.explora-author img{
  width:88px;height:88px;flex:none;border-radius:50%;object-fit:cover;
}
.explora-author p{color:var(--muted);font-size:.95rem;margin:0 0 .5rem;max-width:60ch}
.explora-author .explora-author-name{color:var(--ink);font-weight:600;font-size:1rem}
.explora-author .explora-author-name span{color:var(--muted);font-weight:400}
.explora-author a{color:var(--pine);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.explora-author a:hover{border-color:var(--pine)}
@media(max-width:960px){
  .explora-author{margin-inline-start:0}
  .explora-author img{width:64px;height:64px}
}

/* --- Bloque "siguiente paso" contextual (Fase P0-A) -----------------------
   Reemplaza el antiguo CTA fijo "Reservar una sesión". Comparte el look de
   .explora-cta (ya definido arriba); añade solo el enlace secundario. */
.explora-next-alt{
  display:inline-block;margin-top:1rem;margin-left:1rem;
  color:var(--pine);font-weight:600;font-size:.95rem;
}
.explora-next-alt:hover{color:var(--ink)}
@media (max-width:640px){
  .explora-next-alt{display:block;margin-left:0;margin-top:1.1rem}
}