/* Reglas que en el sitio estatico viven en un <style> dentro de cada pagina.
   Desde el CMS no hay una pagina donde meterlas, asi que se comparten aqui.
   Copiadas literalmente de es/diseno-web-sanitaria.html y es/privacidad.html;
   si cambian alli, cambiarlas aqui. */

/* Migas de pan — se generan desde el arbol en Partials/_Migas.cshtml */
.crumb{border-bottom:1px solid var(--line);background:var(--surface)}
.crumb .wrap{display:flex;align-items:center;gap:9px;padding-block:12px;font-size:.84rem;color:var(--muted);flex-wrap:wrap}
.crumb a{color:var(--muted);font-weight:600}
.crumb a:hover{color:var(--primary-strong)}
.crumb .sep{opacity:.5}
.crumb [aria-current]{color:var(--ink);font-weight:700}

/* Chips de especialidades — Partials/blocklist/Components/bloqueEspecialidades */
.xgrid{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.xchip{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--ink-soft);transition:transform .18s ease,border-color .18s ease,color .18s ease}
.xchip:hover{transform:translateY(-2px);border-color:var(--teal-200);color:var(--primary-strong)}
.xchip.is-here{background:var(--teal-700);border-color:var(--teal-700);color:#fff}

/* Rejilla de tarjetas (.scard) — listado del blog y bloque Tarjetas */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.trio{grid-template-columns:1fr}}

/* Texto largo — paginas legales y posts del blog */
.legal-wrap{max-width:820px;margin-inline:auto}
.legal-prose{font-size:1.02rem;line-height:1.7;color:var(--ink-soft)}
.legal-prose>*+*{margin-top:1em}
.legal-prose h2{font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--ink);margin-top:1.8em;letter-spacing:-.01em}
.legal-prose h3{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--ink);margin-top:1.4em}
.legal-prose a{color:var(--primary-strong);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.legal-prose ul{padding-left:1.3em;display:flex;flex-direction:column;gap:.5em}
.legal-prose li::marker{color:var(--teal)}
.legal-prose strong{color:var(--ink)}
.legal-prose img{max-width:100%;height:auto;border-radius:var(--r-lg,14px)}

/* Panel del articulo destacado del blog cuando no tiene imagen: en el sitio
   estatico ahi iba una maqueta de factura hecha a mano, que solo tenia sentido
   para aquel articulo concreto. Aqui se usa el icono de la categoria. */
.fp-glyph{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-lg);background:linear-gradient(135deg,#1a6b78,#0c2a31)}
.fp-glyph svg{width:38%;height:38%;color:rgba(255,255,255,.85)}
.fp-media img{width:100%;height:auto;border-radius:var(--r-lg);display:block}

/* Topologia multicentro. Va aqui, y no en el `cssPagina` del articulo, porque
   tambien se pinta en el panel del destacado del listado (`mediaHtml`), y el
   listado no carga el CSS de sus hijos. Los articulos que la usan la repiten en
   su propio `cssPagina`: son las mismas reglas, y ese archivo carga despues. */
.multi{margin:1.6em 0}
.sedes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.sedes{grid-template-columns:1fr}}
.sede{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-align:center;box-shadow:var(--shadow-sm)}
.sede b{display:block;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink)}
.sede span{display:block;font-size:.82rem;color:var(--muted)}
.sede em{display:inline-block;margin-top:7px;font-style:normal;font-size:.74rem;font-weight:600;color:var(--teal-700);background:var(--teal-50);border:1px solid var(--teal-100);border-radius:6px;padding:2px 7px}
.bus{width:100%;height:44px;display:block;color:var(--teal-200)}
.nucleo{background:linear-gradient(135deg,var(--teal-800),var(--teal-900));color:#eafafd;border-radius:var(--r-lg);padding:18px 20px}
.nucleo h4{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;margin:0 0 4px}
.nucleo p{font-size:.9rem;line-height:1.5;color:rgba(234,250,253,.8);margin:0}
.nucleo-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.nucleo-chips span{font-size:.8rem;padding:4px 10px;border-radius:var(--r-pill);background:rgba(122,219,231,.16);border:1px solid rgba(122,219,231,.34);color:#cdf3f8}


/* Fichas de contacto directo — columna izquierda de PaginaContacto.
   El resto del CSS de esa pagina vive en `cssPagina` del nodo, pero estas van
   aqui a proposito: el contenido de produccion no se importa desde el
   repositorio, y la ficha del telefono no puede quedar sin estilo esperando a
   que alguien pegue el CSS en el backoffice. Se apoyan en `.field`, `.consent`,
   `.form-msg` y `.spin`, que si estan en `cssPagina`; solo se usan ahi. */
.ct-cards{display:flex;flex-direction:column;gap:14px}

/* Llamada directa. Es la accion caliente de la pagina, asi que va en solido
   sobre el teal de marca y no compite con la tarjeta blanca del formulario. */
.ct-call{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--teal-800),var(--teal-600));color:#fff;box-shadow:0 18px 36px -22px rgba(8,81,95,.75);transition:transform .18s ease,box-shadow .18s ease}
.ct-call:hover{transform:translateY(-2px);box-shadow:0 26px 46px -22px rgba(8,81,95,.8);color:#fff}
.ct-call:focus-visible{outline:3px solid var(--teal-300);outline-offset:3px}
.ct-call-ic{width:52px;height:52px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.ct-call-ic svg{width:24px;height:24px}
.ct-call-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ct-call-eyebrow{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-200)}
.ct-tel{font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.55rem);letter-spacing:-.01em;white-space:nowrap}
.ct-call-note{font-size:.8rem;color:rgba(234,247,250,.82);line-height:1.4}
.ct-call-go{margin-left:auto;flex-shrink:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);transition:background .18s ease,transform .18s ease}
.ct-call-go svg{width:18px;height:18px}
.ct-call:hover .ct-call-go{background:rgba(255,255,255,.24);transform:translateX(2px)}
@media(max-width:420px){.ct-call-go{display:none}}

/* «Te llamamos»: el mismo endpoint que el formulario largo, pero pidiendo solo
   nombre y telefono. Quien llega con prisa no rellena catorce campos. */
.ct-callback{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.ct-callback-head{display:flex;gap:13px;align-items:flex-start}
.ct-callback-ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;background:var(--coral-50);color:var(--coral-700);border:1px solid var(--coral-100)}
.ct-callback-ic svg{width:20px;height:20px}
.ct-callback h3{font-family:var(--font-display);font-weight:800;font-size:1.06rem;color:var(--ink);margin:0}
.ct-callback-head p{margin:3px 0 0;font-size:.88rem;color:var(--muted);line-height:1.5}
.ct-callback form{display:flex;flex-direction:column;gap:13px}
.cb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.ct-callback .field label{font-size:.84rem}
.ct-callback .field input,.ct-callback .field select{padding:10px 13px;font-size:.94rem}
.ct-callback .field select{background-position:right 12px center;padding-right:36px}
.ct-callback .consent{margin-top:0;font-size:.81rem;line-height:1.45}
.ct-callback .consent input{width:16px;height:16px;margin-top:2px}
.ct-callback .btn{width:100%;justify-content:center;padding:14px 22px;font-size:.98rem}
.ct-callback .form-msg{font-size:.88rem;padding:12px 14px}
.ct-callback-note{font-size:.78rem;color:var(--muted);text-align:center;line-height:1.45;margin:0}