/*
Theme Name: Recorriendo Historias
Theme URI: https://instagram.com/recorriendohistorias.uy
Author: Alejandro Torterolo
Description: Landing page de Recorriendo Historias: recorridos guiados por Montevideo.
Version: 1.1
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
Text Domain: recorriendo-historias
*/

/* ============ Tokens de marca ============ */
:root{
  --tinta:#0F0C0A;      /* fondo del logo */
  --tinta-2:#191512;
  --tinta-3:#241F1B;
  --linea:#342D27;
  --naranja:#EF8030;    /* naranja del logo */
  --naranja-hondo:#C9601A;
  --hueso:#F3EFE6;      /* blanco del logo */
  --gris:#A79E93;
  --fantasma:#231E1A;   /* texto apagado del hero */
  --sans:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --ancho:1120px;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* La marca es oscura: se mantiene igual en ambos modos */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --tinta:#0F0C0A; --hueso:#F3EFE6; } }
:root[data-theme="dark"]{ --tinta:#0F0C0A; --hueso:#F3EFE6; }

*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tinta);color:var(--hueso);font-family:var(--serif);font-size:1.125rem;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:4px}
.envoltura{width:min(var(--ancho),100% - 2.5rem);margin-inline:auto}
h1,h2,h3{font-family:var(--sans);font-weight:800;line-height:1.08;letter-spacing:-.015em;margin:0}
h2{font-size:clamp(2rem,4.6vw,3.25rem)}
h3{font-size:1.35rem;letter-spacing:-.005em}
p{margin:0 0 1em}
.medida{max-width:62ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ Botones ============ */
.boton{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:700;font-size:1rem;
  padding:.9em 1.4em;border-radius:999px;text-decoration:none;border:2px solid var(--naranja);cursor:pointer;
  transition:background-color .15s,color .15s}
.boton-lleno{background:var(--naranja);color:var(--tinta)}
.boton-lleno:hover{background:var(--hueso);border-color:var(--hueso)}
.boton-borde{background:transparent;color:var(--hueso)}
.boton-borde:hover{background:var(--naranja);color:var(--tinta)}
.boton svg{width:1.2em;height:1.2em;flex:none}

/* ============ Encabezado ============ */
.cabecera{position:sticky;top:0;z-index:20;background:rgba(15,12,10,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.cabecera.con-borde{border-color:var(--linea)}
.cabecera .envoltura{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--sans);font-weight:800;font-size:.98rem;letter-spacing:-.01em}
.marca img{width:40px;height:auto}
.nav{display:flex;gap:1.6rem;font-family:var(--sans);font-weight:600;font-size:.92rem}
.nav a{text-decoration:none;color:var(--gris)}
.nav a:hover{color:var(--hueso)}
.cabecera .boton{padding:.55em 1em;font-size:.9rem}
@media (max-width:860px){.nav{display:none}.marca span{display:none}}

/* ============ Hero con lupa ============ */
.hero{position:relative;overflow:hidden;min-height:min(92vh,860px);display:flex;align-items:center;isolation:isolate;cursor:default}
.campo{position:absolute;inset:-4% -4%;z-index:-2;display:flex;flex-wrap:wrap;align-content:center;gap:.35em 1.1em;
  font-family:var(--serif);font-size:clamp(1.05rem,1.9vw,1.5rem);line-height:1.5;padding:2rem;user-select:none;pointer-events:none}
.campo span:nth-child(3n){font-family:var(--sans);font-weight:800;letter-spacing:-.01em}
.campo span:nth-child(4n){font-style:italic}
.campo-apagado{color:var(--fantasma)}
.campo-revelado{color:var(--hueso);
  -webkit-mask-image:radial-gradient(circle var(--r,150px) at var(--x,70%) var(--y,45%),#000 96%,transparent 100%);
          mask-image:radial-gradient(circle var(--r,150px) at var(--x,70%) var(--y,45%),#000 96%,transparent 100%)}
.campo-revelado span:nth-child(3n){color:var(--naranja)}
.aro{position:absolute;z-index:-1;left:0;top:0;width:calc(var(--r,150px)*2.55);height:calc(var(--r,150px)*2.55);pointer-events:none;
  transform:translate(calc(var(--px,0px) - var(--r,150px)),calc(var(--py,0px) - var(--r,150px)))}
.aro circle,.aro line{stroke:var(--naranja);fill:none}
.hero-contenido{position:relative;z-index:1;padding:5rem 0 4.5rem}
.hero-contenido::before{content:"";position:absolute;top:-6%;bottom:-6%;left:-12vw;width:min(900px,100vw);z-index:-1;
  background:radial-gradient(ellipse at 45% 50%,rgba(15,12,10,.94) 0%,rgba(15,12,10,.8) 50%,transparent 72%);pointer-events:none}
.hero h1{margin:0}
.hero h1 img{width:min(560px,88vw);height:auto}
.bajada{font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.45;max-width:34ch;margin:2rem 0 2.2rem}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem}
.pista{margin-top:2.4rem;font-family:var(--sans);font-size:.85rem;color:var(--gris)}
@media (hover:none){.pista{display:none}}

/* ============ Secciones ============ */
.seccion{padding:clamp(4.5rem,9vw,7.5rem) 0;border-top:1px solid var(--linea)}
.seccion-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2rem 4rem;align-items:end;margin-bottom:3rem}
.seccion-intro p{color:var(--gris);margin:0}
@media (max-width:800px){.seccion-intro{grid-template-columns:1fr}}

/* Recorridos */
.recorridos{display:grid;grid-template-columns:1.35fr 1fr;gap:1.25rem}
.recorrido{background:var(--tinta-2);border:1px solid var(--linea);border-radius:20px;padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column}
.recorrido-principal{grid-row:span 2;background:linear-gradient(160deg,#211a14 0%,var(--tinta-2) 60%)}
.recorrido-principal h3{font-size:clamp(1.7rem,3vw,2.3rem)}
.recorrido p{color:var(--gris);margin:.8rem 0 1.2rem}
.datos{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--hueso);margin:0 0 1.4rem;padding:0;list-style:none}
.datos li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--naranja);margin-right:.5em;vertical-align:.12em}
.tematicas{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:0}
.tematicas li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-top:1px solid var(--linea);font-family:var(--sans);font-weight:700;font-size:1rem}
.tematicas li span{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--gris);font-size:.98rem;text-align:right}
.recorrido .boton{margin-top:auto;align-self:flex-start}
@media (max-width:860px){.recorridos{grid-template-columns:1fr}.recorrido-principal{grid-row:auto}}
@media (max-width:520px){.tematicas li{flex-direction:column;gap:.1rem}.tematicas li span{text-align:left}}

/* Agenda */
.agenda{list-style:none;padding:0;margin:0;display:grid;gap:0}
.evento{display:grid;grid-template-columns:7.5rem 1fr auto;gap:1rem 2rem;align-items:center;padding:1.6rem 0;border-top:1px solid var(--linea)}
.evento:last-child{border-bottom:1px solid var(--linea)}
.fecha{font-family:var(--sans);line-height:1}
.fecha b{display:block;font-size:2.6rem;font-weight:900;color:var(--naranja);letter-spacing:-.03em}
.fecha small{font-size:.9rem;font-weight:600;color:var(--gris)}
.evento h3{margin-bottom:.35rem}
.evento p{margin:0;color:var(--gris);font-size:1rem}
.evento .llevar{color:var(--hueso);font-family:var(--sans);font-size:.88rem;font-weight:600;margin:.5rem 0 .2rem}
.evento .nota-ev{font-size:.92rem;font-style:italic;margin:0 0 .3rem}
.cupos{font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--naranja)}
@media (max-width:700px){.evento{grid-template-columns:5rem 1fr}.evento .boton{grid-column:1 / -1;justify-self:start}}
.vacio{padding:2.5rem;border:1px dashed var(--linea);border-radius:20px;color:var(--gris)}
.vacio a{color:var(--naranja)}

/* Quién guía */
.guia{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3rem 5rem;align-items:center}
.retrato{aspect-ratio:4/5;border-radius:20px;background:var(--tinta-2);border:1px solid var(--linea);display:grid;place-items:center;overflow:hidden;position:relative}
.retrato img{width:46%;opacity:.9}
.retrato figcaption{position:absolute;bottom:1rem;left:1rem;right:1rem;font-family:var(--sans);font-size:.8rem;color:var(--gris);text-align:center}
.guia blockquote{margin:0 0 1.6rem;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.35;font-style:italic}
.guia p{color:var(--gris)}
@media (max-width:800px){.guia{grid-template-columns:1fr}.retrato{max-width:320px}}

/* Entrevistas */
.entrevistas{background:var(--tinta-2)}
.entrevistas-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3rem 5rem;align-items:start}
.preguntas{list-style:none;padding:0;margin:2rem 0}
.preguntas li{font-size:clamp(1.25rem,2.2vw,1.6rem);font-style:italic;line-height:1.35;padding:.9rem 0 .9rem 1.4rem;border-left:3px solid var(--naranja);margin-bottom:.8rem}
.publicadas{margin-top:2.5rem;padding:1.5rem;border:1px dashed var(--linea);border-radius:16px;color:var(--gris);font-size:1rem}
.publicadas strong{font-family:var(--sans);color:var(--hueso);display:block;margin-bottom:.3rem}
@media (max-width:900px){.entrevistas-grid{grid-template-columns:1fr}}

/* Formularios */
.formulario{background:var(--tinta);border:1px solid var(--linea);border-radius:20px;padding:clamp(1.4rem,3vw,2.4rem)}
.formulario h3{margin-bottom:.4rem}
.formulario>p{color:var(--gris);font-size:1rem;margin-bottom:1.6rem}
.campo-form{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.15rem}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:560px){.fila{grid-template-columns:1fr}}
label,legend{font-family:var(--sans);font-weight:700;font-size:.9rem}
.ayuda{font-family:var(--serif);font-weight:400;color:var(--gris);font-size:.92rem}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--hueso);background:var(--tinta-3);border:1px solid var(--linea);
  border-radius:10px;padding:.75rem .9rem;transition:border-color .15s}
textarea{min-height:6.5rem;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--naranja)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--naranja);outline-offset:1px}
fieldset{border:0;padding:0;margin:0 0 1.15rem}
.opciones{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.opcion input{position:absolute;opacity:0}
.opcion span{display:inline-block;padding:.5rem 1rem;border:1px solid var(--linea);border-radius:999px;font-family:var(--sans);font-size:.88rem;font-weight:600;cursor:pointer}
.opcion input:checked+span{background:var(--naranja);border-color:var(--naranja);color:var(--tinta)}
.opcion input:focus-visible+span{outline:2px solid var(--naranja);outline-offset:2px}
.check{display:flex;gap:.7rem;align-items:flex-start;font-family:var(--serif);font-weight:400;font-size:.95rem;color:var(--gris);margin:.4rem 0 1.4rem}
.check input{margin-top:.3rem;accent-color:var(--naranja);width:1.1rem;height:1.1rem;flex:none}
.error{color:#FF9A9A;font-family:var(--sans);font-size:.85rem;font-weight:600;min-height:1.2em;margin:.2rem 0 .8rem}
.nota{font-size:.88rem;color:var(--gris);margin:.9rem 0 0}

/* Grupos */
.grupos{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:2rem 4rem;align-items:center}
.grupos p{color:var(--gris);margin:1rem 0 0}
@media (max-width:760px){.grupos{grid-template-columns:1fr}}

/* Preguntas frecuentes */
.faq{max-width:780px}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;padding:1.3rem 2.5rem 1.3rem 0;font-family:var(--sans);font-weight:700;font-size:1.08rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:12px;height:12px;border-right:2.5px solid var(--naranja);border-bottom:2.5px solid var(--naranja);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{color:var(--gris);padding-right:2rem;margin:0 0 1.4rem}

/* Contacto */
.contacto-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3rem 5rem;align-items:start}
.vias{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1rem}
.vias a{display:flex;align-items:center;gap:.9rem;text-decoration:none;font-family:var(--sans);font-weight:700}
.vias a:hover{color:var(--naranja)}
.vias svg{width:22px;height:22px;flex:none;color:var(--naranja)}
@media (max-width:900px){.contacto-grid{grid-template-columns:1fr}}

/* Pie */
.pie{border-top:1px solid var(--linea);padding:3rem 0 6rem}
.pie .envoltura{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;align-items:center}
.pie img{width:220px}
.pie p{margin:0;font-family:var(--sans);font-size:.85rem;color:var(--gris)}

/* WhatsApp flotante */
.wa-flotante{position:fixed;right:1.1rem;bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));z-index:30;width:60px;height:60px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.45);text-decoration:none;transition:transform .15s}
.wa-flotante:hover{transform:scale(1.07)}
.wa-flotante svg{width:32px;height:32px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}