/* Componentes que se repiten en varias páginas (del prototipo). */

.ph{background:var(--ph);border:1px dashed var(--ph-line);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;text-align:center;padding:12px}
.sechead{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.sechead>a{font-weight:700}

/* Ícono en recuadro */
.ico{width:48px;height:48px;border-radius:12px;background:var(--brand-soft);color:var(--brand-fg);display:flex;align-items:center;justify-content:center;flex:none}

/* Tarjeta de trámite o tema */
.task{display:flex;flex-direction:column;gap:10px;padding:22px;text-decoration:none;color:var(--ink)}
a.task:hover{border-color:var(--brand-fg)}
.task b{font-size:18px}
.task span.d{font-size:15px;color:var(--muted)}
.task .chip{align-self:flex-start}
.task[id]{scroll-margin-top:96px}
.task:target{border-color:var(--accent-bg);box-shadow:0 0 0 3px var(--accent-soft)}
/* Trámites de la home: en el celular, dos columnas compactas */
@media (max-width:767px){
  .tramites{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tramites .task{padding:14px;gap:6px}
  .tramites .task b{font-size:16px;line-height:1.2}
  .tramites .task span.d{font-size:14px}
}
.task.alba{background:var(--accent-soft);border-color:var(--accent-line)}
.task.alba .ico{background:var(--accent-bg);color:#fff}

/* Ficha de plan */
.plan{padding:28px;display:flex;flex-direction:column;gap:14px}
.plan.hl{border:2px solid var(--accent-bg)}
.plan .para{font-weight:700;font-size:14px;color:var(--muted)}
.plan.hl .para{color:var(--accent-fg)}
.reco{align-self:flex-start;justify-self:start;width:fit-content;background:var(--accent-bg);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.plan h3{font-size:28px;font-weight:800}
.plan .precio{color:var(--ink);font-size:22px}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.plan li{display:flex;gap:10px}
.plan li::before{content:"✓";color:var(--accent-fg);font-weight:700}
.plan .botones{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}

/* Banda azul con llamado a la acción */
.band{background:var(--brand-bg);color:var(--brand-on);border-radius:24px;padding:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px;align-items:center}
.band p{color:var(--brand-on-2)}
.band .caja{background:var(--brand-bg-2);border-radius:18px;padding:22px;display:grid;gap:10px}
.band .caja b{font-size:18px}
.band .caja .alba-logo{width:180px;height:auto;display:block}
.band .caja .btn{justify-self:start}
.botones{display:flex;gap:10px;flex-wrap:wrap}
.btn.tienda{border-radius:12px}

@media (max-width:520px){.band{padding:22px}}

/* Cabecera de página con texto e imagen o recuadros al costado */
.hero{background:var(--surface);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:40px;padding-block:40px 44px;align-items:center}
.hero .lead{font-size:19px;max-width:40ch}
.migas{font-size:14px;color:var(--muted)}
.migas a{color:var(--brand-fg)}

/* Cabecera simple de página interna */
.pag-top{padding-block:32px 0;display:grid;gap:24px}

/* Recuadro con contenido */
.pane{padding:28px;display:grid;gap:18px;align-content:start}
.pane h2{font-size:22px}
.pane .btn{justify-self:start}
.pane ol{margin:0;padding-left:22px;display:grid;gap:10px}
.pane.aviso{background:var(--warn-bg);border-color:transparent}
.pane.aviso h2,.pane.aviso p{color:var(--warn-fg)}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}

/* Preguntas frecuentes */
.faqs{padding:8px 24px}
.faqs h2{font-size:22px;padding-top:18px}
details.faq{border-top:1px solid var(--line)}
details.faq summary{padding:16px 0;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--accent-fg);font-size:22px;line-height:1}
details.faq[open] summary::after{content:"−"}
details.faq p{padding-bottom:16px;color:var(--muted);max-width:68ch}
@media (max-width:520px){.pane{padding:22px}}
.g-planes{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}

/* Pasos numerados */
.steps{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap;counter-reset:s}
/* Pasos: texto con su número, sin borde ni fondo para que no parezcan botones */
.steps li{counter-increment:s;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink);padding:4px 12px 4px 0}
.steps li::before{content:counter(s);width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand-bg);color:var(--brand-on);font-weight:700}

/* Contenido con columna lateral */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.aside{padding:22px;display:grid;gap:12px;position:sticky;top:96px}
.admin-bar .aside{top:128px}
.aside .btn{justify-self:start}
@media (max-width:1080px){.flow{grid-template-columns:1fr}.aside{position:static}}

/* Formularios */
label.f{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;min-width:0}
input.f,select.f,textarea.f{min-height:48px;border-radius:12px;border:1px solid var(--line-fuerte);background:var(--surface);color:var(--ink);padding:0 14px;font:inherit;font-size:16px;width:100%}
textarea.f{padding:12px 14px;min-height:96px;resize:vertical}
input.f:focus-visible,select.f:focus-visible,textarea.f:focus-visible{border-color:var(--foco);outline:3px solid var(--foco);outline-offset:1px}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:16px;border:2px solid var(--line);border-radius:14px;cursor:pointer;background:var(--surface)}
.opt:has(input:checked){border-color:var(--brand-fg);background:var(--brand-soft)}
.opt input{margin-top:4px;accent-color:var(--brand-bg);width:18px;height:18px;flex:none}
fieldset.opciones{border:0;padding:0;margin:0;display:grid;gap:10px}
fieldset.opciones legend{font-weight:700;margin-bottom:8px;padding:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--brand-bg);flex:none}
.ex{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warn-fg);background:var(--warn-bg);padding:2px 8px;border-radius:6px;justify-self:start}

/* Botones de filtro (provincias, tipos) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--brand-bg);border-color:var(--brand-bg);color:var(--brand-on)}

/* Ficha (oficinas, prestadores) */
.ficha{padding:18px;display:grid;gap:8px;align-content:start}
.ficha .chip{justify-self:start}
.ficha .acts{display:flex;gap:4px 16px;flex-wrap:wrap;font-weight:700;font-size:15px}
.ficha .acts a,.ficha .acts button,.pr-tels a{display:inline-flex;align-items:center;min-height:44px}
input.f[aria-invalid="true"],select.f[aria-invalid="true"],textarea.f[aria-invalid="true"]{border-color:var(--accent-bg);outline:2px solid var(--accent-soft)}

/* Listado con botón a la derecha (formularios) */
.listado-forms{padding:8px 22px 14px}
.listado-forms h2{font-size:20px;padding-top:16px}
.track{list-style:none;margin:0;padding:0}
.track li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 0;border-top:1px solid var(--line);align-items:center}
.track li:first-child{border-top:0}
.track .meta{font-size:14px;color:var(--muted);grid-column:1/-1}
.btn.chico{min-height:40px;padding:0 16px;font-size:15px}

/* Centro de ayuda */
.ayuda-top{background:var(--surface);border-bottom:1px solid var(--line)}
.ayuda-top .wrap{padding-block:32px 40px;display:grid;gap:16px;max-width:820px}
.buscador{display:flex;gap:8px;flex-wrap:wrap}
.buscador input.f{flex:1 1 240px;min-height:54px}
.buscador .btn{min-height:54px;border-radius:12px}
.faqs h3{font-size:17px;color:var(--accent-fg);padding-top:18px;margin-bottom:4px}
.faq .respuesta{padding-bottom:16px;color:var(--muted);max-width:68ch}
.faq .respuesta p+p{margin-top:.6em}
.canal-alba{background:var(--accent-soft);border-color:var(--accent-line)}
.pane .dato{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);text-decoration:none}
.pane a.dato:hover{text-decoration:underline}

/* Programas y derechos (estilo del sitio actual) */
.prog{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.prog:has(>:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))} /* 6 programas: dos filas de 3 */
.pcard{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;text-decoration:none;min-height:480px;background:var(--prog-blue);color:#fff;transition:transform .2s}
.pcard:hover{transform:translateY(-4px)}
.pcard.pink{background:var(--prog-pink)}
.pcard.white{background:var(--surface);color:var(--prog-blue-ink);border:1px solid var(--line)}
.pimg{height:220px;background:var(--ph);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;flex:none}
.pimg img{width:100%;height:100%;object-fit:cover}
/* Sin foto: un ícono sobre el color de la marca (nunca el logo sobre gris) */
.sin-foto{background:var(--brand-soft);color:var(--brand-fg);border:0}
.sin-foto svg.i{width:56px;height:56px;stroke-width:1.4}
.pimg.sin-foto{height:150px;background:rgba(255,255,255,.14);color:#fff}
.pcard.white .pimg.sin-foto{background:var(--brand-soft);color:var(--prog-blue-ink)}
.sisalud-ilus{height:300px;background:var(--brand-bg);color:var(--brand-on);border-radius:24px}
.sisalud-ilus svg.i{width:120px;height:120px;stroke-width:1.2}
.pbody{flex:1;margin-top:-18px;border-radius:18px 18px 0 0;background:inherit;padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;position:relative}
.pcard .ptit{font-size:24px;line-height:1.1;font-weight:800;color:inherit}
.pcard p{font-size:15px;line-height:1.45;color:inherit;opacity:.95}
.pmore{margin-top:auto;font-weight:700;display:flex;align-items:center;gap:4px}
.pmore svg{width:18px;height:18px}
@media (max-width:1080px){.prog{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(230px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.pcard{scroll-snap-align:start}}
@media (prefers-reduced-motion:reduce){.pcard:hover{transform:none}}
/* Página de un programa */
.prog-foto img{display:block;width:100%;max-height:360px;object-fit:cover;border-radius:18px}
.otros-prog{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.otros-prog a{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);text-decoration:none;font-weight:600}
.otros-prog a:hover{border-color:var(--prog-blue)}

/* Tarjetas de notas (Pensar Salud: home, blog y categorías) */
.notas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.nota{display:grid;gap:8px;color:var(--ink);text-decoration:none;align-content:start}
.nota .ph,.nota img{height:160px;width:100%;object-fit:cover;border-radius:16px}
.nota .meta{font-size:13px;color:var(--muted)}
.nota b{font-size:18px;line-height:1.3}
.nota:hover b{text-decoration:underline}

/* Filtro con links (categorías del blog) */
.chip-link{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.chip-link:hover{border-color:var(--brand-fg)}
.chip-link[aria-current="page"]{background:var(--brand-bg);border-color:var(--brand-bg);color:var(--brand-on)}

/* Paginado */
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600}
.pagination .page-numbers.current{background:var(--brand-bg);border-color:var(--brand-bg);color:var(--brand-on)}

/* Resultados de búsqueda */
.resultados{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.resultados li{padding:18px 20px;display:grid;gap:6px}
.resultados .meta{font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.resultados a{color:var(--ink);text-decoration:none;font-size:18px}
.resultados a:hover{text-decoration:underline}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Formularios públicos (Prestadores) */
.form-error{color:var(--accent-fg);font-weight:600}
input.f[type=file]{padding:10px 14px;min-height:auto}
/* Lugar reservado para la verificación de Cloudflare (300 × 65 más su margen: 72 px medidos en el sitio de prueba) */
.cf-turnstile{min-height:72px;width:300px;max-width:100%}

/* Páginas de cada plan (page-plan-bronce.php y page-plan-pmo.php) */
.precio-grande{font-family:var(--f-display);font-size:30px;color:var(--ink)}
.formas{display:grid;gap:16px;align-content:start}
.formas .forma{display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:var(--brand-soft)}
.formas .forma b{font-size:18px}
.lista-check{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.lista-check li{display:flex;gap:10px}
.lista-check li::before{content:"✓";color:var(--accent-fg);font-weight:700}
.pasos-plan{margin:0;padding:0;list-style:none;display:grid;gap:14px;counter-reset:p}
.pasos-plan li{counter-increment:p;display:grid;grid-template-columns:34px 1fr;column-gap:12px}
.pasos-plan li::before{content:counter(p);grid-row:span 2;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-bg);color:#fff;font-weight:700}
.plan-otra{border:2px solid var(--accent-bg)}

/* Delegaciones: una sección por provincia y tarjetas con ciudad, prestador, dirección y horario */
.deleg-filtros{padding:18px;display:grid;gap:14px;align-items:end;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.deleg{display:grid;gap:28px}
.deleg-prov{display:grid;gap:12px}
.deleg-prov h2{font-size:24px}
.deleg-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.deleg-ficha{padding:20px;display:grid;gap:8px;align-content:start}
.deleg-ficha h3{font-size:20px;line-height:1.2}
.deleg-ficha .chip{justify-self:start}
.deleg-dato{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;align-items:baseline;font-size:15px}
.deleg-dato .chip{justify-self:start}
.deleg-et{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
@media (max-width:767px){.deleg-filtros{grid-template-columns:1fr}.deleg-dato{grid-template-columns:1fr;gap:0}}