/* guias.css — Diseño de las guías de isforyou.es (estilo sencillo y luminoso, 20-oct-2026).
   Solo afecta a las páginas que usan includes/guias.php (todo va dentro de .gwrap). Cabecera y pie no se tocan. */
.gwrap{
  --g-ink:#1d1d1f;--g-text:#424245;--g-soft:#86868b;--g-line:#e8e8ed;
  --g-rose:#e6195a;--g-link:#6d28d9;
  max-width:700px;margin:0 auto;padding:clamp(28px,6vw,72px) 24px clamp(80px,12vw,140px);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Manrope,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--g-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
.gwrap [id]{scroll-margin-top:110px}

/* Migas */
.gcrumb{font-size:14px;font-weight:500;color:var(--g-soft);text-align:center;margin:0;letter-spacing:-.01em}
.gcrumb a{color:var(--g-soft);text-decoration:none}
.gcrumb a:hover{color:var(--g-ink)}
.gcrumb span{margin:0 8px;color:#c7c7cc}

/* Cabecera de la guía */
.ghero{text-align:center;padding:clamp(8px,2vw,24px) 0 0}
.ghero h1{
  font-family:inherit;font-size:clamp(34px,6.2vw,56px);font-weight:700;line-height:1.1;letter-spacing:-.032em;
  color:#ff0055;margin:0 auto;max-width:17ch;text-wrap:balance;padding-bottom:.06em
}
/* Mismo degradado animado que el logo (.isfyLogoText en includes/header.php) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ghero h1{
    background:linear-gradient(90deg,#ff0055,#6d28d9,#d946ef,#ff0055);background-size:200% auto;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:isfyGuiaFlow 4s linear infinite
  }
}
@keyframes isfyGuiaFlow{0%{background-position:0% center}100%{background-position:200% center}}
@media (prefers-reduced-motion:reduce){.ghero h1{animation:none}}
.ghero p{margin:22px auto 0;max-width:34em;font-size:clamp(18px,2.1vw,21px);font-weight:400;line-height:1.5;color:#6e6e73;letter-spacing:-.012em;text-wrap:pretty}
.ghero .gdate{display:block;margin-top:22px;font-size:14px;font-weight:500;color:var(--g-soft)}
.ghero::after{content:"";display:block;height:0;margin:clamp(40px,6vw,64px) auto 0}

/* Secciones: sin tarjetas, solo espacio */
.gcard{background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:clamp(56px,8vw,88px) 0 0}
.gcard::before{content:none}
.ghero+.gcard{margin-top:clamp(40px,6vw,64px)}
.gcard h2{font-size:clamp(27px,3.6vw,36px);font-weight:700;line-height:1.14;letter-spacing:-.028em;color:var(--g-ink);margin:0 0 18px;text-wrap:balance}
.gcard h3{font-size:clamp(19px,2.2vw,21px);font-weight:600;line-height:1.3;letter-spacing:-.018em;color:var(--g-ink);margin:34px 0 8px}
.gcard h2+h3{margin-top:22px}
.gcard p,.gcard li{font-size:clamp(17px,1.9vw,18px);line-height:1.68;letter-spacing:-.008em;margin:0 0 16px}
.gcard ul,.gcard ol{margin:0 0 18px;padding-left:1.15em}
.gcard li{margin-bottom:12px;padding-left:4px}
.gcard li::marker{color:var(--g-rose)}
.gcard strong{color:var(--g-ink);font-weight:600}
.gcard a{color:var(--g-link);font-weight:500;text-decoration:none}
.gcard a:hover{text-decoration:underline;text-underline-offset:3px}

/* Frases de ejemplo: tipografía, no cajas */
.q{position:relative;margin:26px 0;padding:0 0 0 30px;background:none;border:0;border-radius:0;
  font-size:clamp(19px,2.2vw,22px);line-height:1.45;font-weight:500;letter-spacing:-.018em;color:var(--g-ink)}
.q::before{content:"\201C";position:absolute;left:0;top:-.12em;font-size:1.9em;line-height:1;color:var(--g-rose);font-weight:600}

/* Índice de la guía */
.gtoc{background:none;border:0;border-radius:0;padding:0;margin:0}
.gtoc b{display:block;font-size:14px;font-weight:600;color:var(--g-soft);text-transform:none;letter-spacing:-.005em;margin:0 0 12px}
.gtoc ol{list-style:none;counter-reset:gt;margin:0;padding:0}
.gtoc li{counter-increment:gt;margin:0;padding:7px 0;font-size:clamp(17px,1.9vw,19px);line-height:1.4}
.gtoc li::before{content:counter(gt);display:inline-block;min-width:1.6em;color:#c7c7cc;font-weight:500;font-variant-numeric:tabular-nums}
.gtoc a{color:var(--g-ink);font-weight:500}
.gtoc a:hover{color:var(--g-link);text-decoration:none}

/* Tablas: solo líneas finas */
.gtable{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:16px}
.gtable th,.gtable td{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--g-line);vertical-align:top;line-height:1.5}
.gtable th{font-size:13px;font-weight:600;color:var(--g-soft);text-transform:none;letter-spacing:0}
.gtable td{color:var(--g-text)}

/* Llamada final: centrada, discreta */
.gcard.gend{text-align:center;margin-top:clamp(88px,12vw,140px)}
.gend h2{font-size:clamp(30px,4.4vw,44px);margin-bottom:14px}
.gend p{max-width:30em;margin:0 auto;color:#6e6e73;font-size:clamp(17px,2vw,19px)}
.gctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 30px;margin-top:30px}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:999px;
  background:var(--g-rose);color:#fff!important;font-size:17px;font-weight:500!important;letter-spacing:-.01em;text-decoration:none!important;
  transition:background .2s ease}
.cta:hover{background:#cc1450}
.cta.alt{min-height:0;padding:0;border-radius:0;background:none;color:var(--g-link)!important}
.cta.alt::after{content:"\203A";margin-left:6px;font-size:1.25em;line-height:1}
.cta.alt:hover{background:none;text-decoration:underline!important;text-underline-offset:3px}

/* Sigue leyendo / listados: texto y espacio */
.gcard.gmore{margin-top:clamp(80px,11vw,120px)}
.gmore h2{font-size:clamp(22px,2.6vw,26px);margin-bottom:6px}
.grel{display:block;margin:0}
.grel a{display:block;padding:18px 0;background:none;border:0;border-radius:0;color:#6e6e73!important;font-weight:400!important;font-size:16px;line-height:1.5;text-decoration:none!important}
.grel a b{display:block;color:var(--g-ink);font-weight:600;font-size:clamp(18px,2vw,19px);letter-spacing:-.016em;line-height:1.35;margin-bottom:4px;transition:color .2s ease}
.grel a b::after{content:"\00a0\203A";color:var(--g-rose);font-weight:500}
.grel a:hover b{color:var(--g-link)}
.gall{margin:18px 0 0!important}
.gall a::after{content:"\00a0\203A"}

/* Índice /guias: dos columnas de texto en pantallas grandes */
.gwrap.gindex{max-width:1000px}
.gindex .ghero h1{max-width:14ch}
.gindex>.gcard{max-width:700px;margin-left:auto;margin-right:auto}
.gindex>.gcard.glist{max-width:none}
.gindex .glist h2{text-align:center;margin-bottom:12px}
@media(min-width:860px){
  .gindex .glist .grel{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
  .gindex .glist .grel a{padding:22px 0}
}
@media(max-width:480px){.gwrap{padding-left:22px;padding-right:22px}.gtable{font-size:15px}.gctas{flex-direction:column}}