/* ============================================================
   CEIPS · Centro de Estudios de Ingeniería y Peritación de Seguros
   Build 1/web — contenidos de 2/ceips2 con el diseño de referencia
   1/diseño/3.html  ·  «Dossier técnico / forense»
   Identidad: teal casi negro + ámbar · tipografía display Archivo,
   cuerpo Space Grotesk, etiquetas IBM Plex Mono · hairlines y anotaciones
   · serif (Source Serif 4) SOLO en las citas, como el diseño de referencia
     vigente en Workspace\ceips
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#05171b;            /* fondo de página */
  --bg-2:#071f24;          /* paneles / bandas */
  --bg-3:#0a262c;          /* hover / inputs */
  --ink:#eef2f1;           /* titulares */
  --fg:#dfe8e7;            /* cuerpo */
  --muted:#9fb6b9;         /* secundario */
  --dim:#7d9698;           /* etiquetas mono */
  --faint:#5f7678;         /* pie / marcas de agua */
  --amber:#e5933a;         /* acento */
  --amber-ink:#05171b;     /* texto sobre ámbar */
  --line:rgba(240,245,244,.14);
  --line-soft:rgba(240,245,244,.09);

  /* OJO: Elementor usa --display para el display:flex de sus contenedores, así
     que dentro de un contenedor var(--ce-display) devuelve «flex» y la familia se
     rompe (el navegador cae a una serif). El token propio va renombrado. */
  --ce-display:'Archivo','Segoe UI',system-ui,sans-serif;
  --display:var(--ce-display);
  --body:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',monospace;

  --container:1320px;
  --pad:40px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* escala tipográfica */
  --fs-mono:12px;
  --step--1:13.5px;
  --step-0:clamp(15px,14px + .25vw,17px);
  --step-1:clamp(18px,16px + .5vw,21px);
  --step-2:clamp(24px,20px + 1.4vw,34px);
  --step-3:clamp(30px,24px + 2.4vw,60px);
  --step-4:clamp(44px,32px + 5vw,120px);

  /* alias de compatibilidad: estilos inline heredados de 2/ceips2 → paleta dossier */
  --gray:var(--muted); --carbon:var(--fg);
  --font-head:var(--body); --font-body:var(--body); --font-serif:var(--ce-display);
  --orange:var(--amber); --orange-bright:var(--amber); --orange-deep:var(--amber);
  --petrol-800:var(--ink); --petrol-900:var(--bg); --sand:var(--bg-2); --sand-2:var(--bg-3);
  --radius:0; --radius-sm:0;
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;font-family:var(--body);font-size:var(--step-0);line-height:1.6;
  color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;
  overflow-x:clip;overflow-wrap:break-word;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);line-height:1}
h1{font-family:var(--ce-display);font-weight:900;font-size:var(--step-4);letter-spacing:-.04em;text-transform:uppercase;line-height:.9}
h2{font-family:var(--ce-display);font-weight:800;font-size:var(--step-3);letter-spacing:-.03em;text-transform:uppercase;line-height:.98}
h3{font-family:var(--body);font-weight:600;font-size:var(--step-1);letter-spacing:-.01em;line-height:1.15}
h4{font-family:var(--body);font-weight:600;font-size:var(--step-0);line-height:1.2}
p{margin:0 0 1rem}
strong,b{font-weight:600;color:var(--ink)}
em{font-style:italic}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
::selection{background:var(--amber);color:var(--amber-ink)}
.amber{color:var(--amber)}

@keyframes ceMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ceRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes ceBlink{50%{opacity:.25}}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 3. Layout ---------- */
.container{width:min(100% - var(--pad),var(--container));margin-inline:auto}
.section{padding-block:clamp(56px,6vw,104px)}
.section--tight{padding-block:clamp(40px,4vw,68px)}
.section--sand{background:var(--bg-2);border-block:1px solid var(--line)}
.section--petrol{background:var(--bg-2);border-block:1px solid var(--line)}
.grid{display:grid;gap:0}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.mw-60{max-width:62ch}
.mw-46{max-width:48ch}
.mx-auto{margin-inline:auto}
.contact-grid>*,.ficha>*,.lab-split>*,.split>*{min-width:0}

/* ---------- 4. Kicker (§) + section head + heading tick ---------- */
.eyebrow{
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;
}
.eyebrow::before{content:"§";font-weight:600;color:var(--amber)}
.section-head{margin-bottom:clamp(28px,3vw,44px)}
.section-head.center .eyebrow{justify-content:center}
.diag{position:relative;display:inline-block}
.diag::after{content:"";position:absolute;left:0;bottom:-.34em;height:3px;width:46px;background:var(--amber)}
.center .diag::after,.diag.center::after{left:50%;transform:translateX(-50%)}
.reg{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}

/* ---------- 5. Botones ---------- */
.btn{
  --btn-bg:var(--amber);--btn-fg:var(--amber-ink);
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--amber);border-radius:0;
  background:var(--btn-bg);color:var(--btn-fg);line-height:1;white-space:nowrap;
  transition:background .2s var(--ease),color .2s,border-color .2s,transform .2s;
}
.btn:hover{background:#fff;border-color:#fff;color:var(--amber-ink)}
.btn .arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:transparent;color:var(--amber);border-color:var(--amber)}
.btn--on-dark{background:transparent;color:var(--ink);border-color:rgba(240,245,244,.35)}
.btn--on-dark:hover{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.btn--sm{padding:10px 16px;font-size:12.5px}
.btn--block{width:100%;justify-content:center}

/* ---------- 6. Ticker ---------- */
.ticker{background:var(--amber);color:var(--amber-ink);overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--bg)}
.ticker-track{display:inline-flex;animation:ceMarq 32s linear infinite;will-change:transform;
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:8px 0}
.ticker-track span{padding:0 22px;border-right:1px solid rgba(10,22,8,.35)}

/* ---------- 7. Header / navegación ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(10,22,8,.72);
  backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--line)}
/* cabecera a todo el ancho: logo en la esquina izquierda, CTA en la esquina derecha */
.site-header .container{width:100%;max-width:none;margin-inline:0;padding-inline:clamp(20px,3vw,44px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:104px}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,.4rem + .8vw,22px)}
.nav-links a{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:.35rem 0;white-space:nowrap;transition:color .2s}
.nav-links a::before{content:"[ ";color:var(--amber);opacity:0;transition:opacity .2s}
.nav-links a::after{content:" ]";color:var(--amber);opacity:0;transition:opacity .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--amber)}
.nav-links a:hover::before,.nav-links a:hover::after,
.nav-links a[aria-current="page"]::before,.nav-links a[aria-current="page"]::after{opacity:1}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;color:var(--ink)}
.brand{display:inline-flex;flex:none;align-items:center}
.brand-img{height:80px;width:auto;max-width:none;display:block}
@media(max-width:760px){.brand-img{height:58px}.nav{min-height:80px}}

/* ---------- 8. Hero (home) ---------- */
.hero{position:relative;border-bottom:1px solid var(--line)}
.hero .container{padding-top:clamp(36px,5vw,72px)}
.filerow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border-bottom:1px solid var(--line);padding-bottom:16px}
.filerow .dot-amber{color:var(--amber)}
.hero-headline{font-family:var(--ce-display);font-weight:900;font-size:var(--step-4);line-height:.88;
  letter-spacing:-.04em;text-transform:uppercase;margin:clamp(24px,4vw,52px) 0 0;color:var(--ink);
  animation:ceRise .8s var(--ease) both}
.stroke{color:transparent;-webkit-text-stroke:1.5px var(--amber)}
.hero-band{position:relative;margin-top:clamp(28px,4vw,56px);height:clamp(300px,42vw,540px);
  overflow:hidden;border-top:1px solid var(--line)}
.hero-band .hero-media{position:absolute;inset:0}
.hero-band img{width:100%;height:100%;object-fit:cover;object-position:center 32%;
  filter:grayscale(.35) contrast(1.05) brightness(.82)}
.hero-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,22,8,.92) 0%,rgba(10,22,8,.35) 42%,rgba(10,22,8,.15) 70%,rgba(10,22,8,.55) 100%)}
.ch{position:absolute;width:26px;height:26px;z-index:2;pointer-events:none}
.ch-tl{top:20px;left:20px;border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
.ch-br{bottom:20px;right:20px;border-bottom:2px solid var(--amber);border-right:2px solid var(--amber)}
.ch-dot{position:absolute;top:44%;left:34%;width:14px;height:14px;border:2px solid var(--amber);
  border-radius:50%;z-index:2;pointer-events:none;animation:ceBlink 2s ease-in-out infinite}
.hero-band-cta{position:absolute;left:clamp(20px,3vw,44px);bottom:clamp(20px,3vw,40px);max-width:36ch;z-index:2}
.hero-lead{font-family:var(--body);font-weight:500;font-size:clamp(16px,1.5vw,21px);line-height:1.5;color:#dfe8e7;margin:0 0 20px}
.hero-coords{position:absolute;right:clamp(20px,3vw,44px);top:clamp(20px,3vw,40px);z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.8);text-align:right}

/* ---------- 8b. Page hero (interiores) ---------- */
.pagehero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.pagehero .container{position:relative;z-index:2;padding-block:clamp(40px,5vw,84px)}
.pagehero .hero-media{position:absolute;inset:0;z-index:0}
.pagehero .hero-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) contrast(1.05) brightness(.5)}
.pagehero .hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,22,8,.95) 0%,rgba(10,22,8,.72) 55%,rgba(10,22,8,.5) 100%)}
.pagehero::before,.pagehero::after{content:"";position:absolute;width:24px;height:24px;z-index:3;pointer-events:none}
.pagehero::before{top:18px;left:18px;border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
.pagehero::after{bottom:18px;right:18px;border-bottom:2px solid var(--amber);border-right:2px solid var(--amber)}
.pagehero h1{margin:.2em 0 .3em}
.pagehero p{color:var(--muted);max-width:56ch;margin:0;font-size:var(--step-1)}
.breadcrumb{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);display:flex;gap:.6rem;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--amber)}

/* ---------- 9. Pilares ---------- */
.grid.cols-3:not(.svc-block .grid){}
.pillar{padding:clamp(24px,2.4vw,34px) 22px clamp(24px,2.4vw,34px) 0;border-top:2px solid var(--amber);
  border-right:1px solid var(--line)}
.pillar:last-child{border-right:0}
.pillar .num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--amber);display:block;margin-bottom:.9rem}
.pillar h3{color:var(--ink);margin-bottom:.5rem}
.pillar p{color:var(--muted);margin:0}

/* ---------- 10. Cifras ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(30px,4vw,52px) 22px clamp(30px,4vw,52px) 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat .value{font-family:var(--ce-display);font-weight:800;font-size:clamp(44px,5.5vw,76px);line-height:.9;letter-spacing:-.03em;color:var(--ink)}
.stat .value .accent{color:var(--amber)}
.stat .label{font-family:var(--body);font-size:14px;color:var(--muted);margin-top:12px}
.section--petrol .stat .label{color:var(--muted)}

/* ---------- 11. Dossier list (servicios en lista) ---------- */
.doss-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.doss{border-top:1px solid var(--line)}
.doss-row{display:grid;grid-template-columns:88px 1fr auto;gap:clamp(14px,2vw,40px);align-items:center;
  padding:clamp(22px,2.4vw,34px) 8px;border-bottom:1px solid var(--line);
  transition:background .25s,padding .25s}
.doss-row:hover{background:rgba(229,147,58,.08);padding-left:22px}
.doss-code{font-family:var(--mono);font-size:13px;color:var(--amber)}
.doss-row h3{font-family:var(--ce-display);font-weight:700;font-size:clamp(20px,2.4vw,34px);line-height:1;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.doss-row p{font-family:var(--body);font-size:15px;color:var(--muted);margin:0;max-width:56ch}
.doss-arrow{font-family:var(--ce-display);font-size:26px;color:var(--amber)}

/* ---------- 12. Tarjetas (paneles dossier) ---------- */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:0;padding:clamp(20px,2vw,28px);
  position:relative;transition:background .25s var(--ease),border-color .25s;display:block}
.card::before{content:"";position:absolute;top:-1px;left:-1px;width:0;height:2px;background:var(--amber);transition:width .3s var(--ease)}
.card:hover{background:var(--bg-3);border-color:rgba(229,147,58,.5)}
.card:hover::before{width:46px}
.card--sand{background:var(--bg-3)}
.card .ico{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);
  color:var(--amber);margin-bottom:1.1rem;transition:border-color .25s,color .25s,background .25s}
.card:hover .ico{border-color:var(--amber);background:rgba(229,147,58,.1)}
.card h3{color:var(--ink);margin-bottom:.4rem}
.card p{color:var(--muted);margin:0;font-size:var(--step-0)}
.card .more{display:inline-flex;gap:.4rem;margin-top:1rem;color:var(--amber);font-family:var(--mono);
  font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.card .more .arrow{transition:transform .2s var(--ease)}
.card:hover .more .arrow{transform:translateX(4px)}
.services-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem}
/* rejilla de tarjetas: sella los bordes contiguos */
.grid.cols-3,.grid.cols-2,.grid.cols-4{gap:0}
.grid.cols-3 .card,.grid.cols-2 .card,.grid.cols-4 .card{margin:-1px 0 0 -1px}

/* ---------- 13. Método ---------- */
.method-track{display:grid;grid-template-columns:repeat(5,1fr)}
.method .method-track,.section .method-track{margin-top:0}
.step{padding:30px 22px 34px 0;border-top:2px solid var(--amber);border-right:1px solid var(--line);text-align:left}
.step:last-child{border-right:0}
.step .dot{width:auto;height:auto;background:none;border-radius:0;box-shadow:none;display:block;
  font-family:var(--ce-display);font-weight:900;font-size:clamp(46px,5vw,72px);line-height:.9;letter-spacing:-.04em;
  color:rgba(240,245,244,.16)}
.step:last-child .dot{color:rgba(229,147,58,.55)}
.step h4{font-family:var(--body);font-weight:600;font-size:19px;color:var(--ink);margin:18px 0 6px}
.step p{font-family:var(--body);font-size:14.5px;color:var(--muted);margin:0}

/* ---------- 14. CTA band ---------- */
.cta-band{background:var(--bg-2);border:1px solid var(--line);border-top:2px solid var(--amber);border-radius:0;
  padding:clamp(28px,3vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem}
.cta-band h2{color:var(--ink);margin:0 0 .4rem}
.cta-band p{color:var(--muted);margin:0}
.cta-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.phone{font-family:var(--ce-display);font-weight:800;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em;color:var(--ink)}

/* ---------- 15. Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;padding-block:clamp(40px,4vw,64px)}
.site-footer h4{font-family:var(--mono);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:1.1rem}
.site-footer li{margin-bottom:.55rem;font-size:14px;color:var(--muted)}
.site-footer a:hover{color:var(--amber)}
.footer-brand .brand-img{height:80px;margin-bottom:1rem}
.footer-brand p{margin:0;max-width:38ch;color:var(--faint);font-size:13.5px}
.footer-bottom{padding-block:20px 30px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.footer-bottom .legal{display:flex;gap:1.4rem;flex-wrap:wrap}

/* ---------- 16. Chips (filtros) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 0}
.chip{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:.55em 1em;border-radius:0;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;transition:all .2s}
.chip::before{content:"[ ";color:var(--amber);opacity:.0;transition:opacity .2s}
.chip::after{content:" ]";color:var(--amber);opacity:.0;transition:opacity .2s}
.chip:hover{border-color:var(--amber);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}

/* ---------- 17. Servicios: bloques temáticos ---------- */
.svc-block{scroll-margin-top:120px}
.svc-block .bar{display:flex;align-items:flex-end;gap:1rem;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.8rem}
.svc-block .knum{font-family:var(--ce-display);color:rgba(240,245,244,.16);font-weight:900;font-size:clamp(34px,5vw,64px);letter-spacing:-.03em;line-height:.8}
.svc-block .kcat{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.svc-block .bar h2{margin:.3rem 0 0}
.svc-block.is-hidden{display:none}

/* ---------- 18. Sectores (acordeón) ---------- */
.accordion{border-top:1px solid var(--line)}
.ac-item{border-bottom:1px solid var(--line)}
.ac-head{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:1.5rem .2rem;
  display:flex;align-items:center;gap:1.1rem;font-family:var(--ce-display);font-weight:700;font-size:clamp(20px,2.4vw,32px);
  text-transform:uppercase;letter-spacing:-.02em;color:var(--ink);transition:color .2s}
.ac-head:hover{color:var(--amber)}
.ac-head .idx{font-family:var(--mono);color:var(--amber);font-size:14px;font-weight:600}
.ac-head .chev{margin-left:auto;transition:transform .3s var(--ease);color:var(--amber)}
.ac-head[aria-expanded="true"] .chev{transform:rotate(180deg)}
.ac-panel{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)}
.ac-inner{padding:0 .2rem 1.8rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.ac-inner h4{font-family:var(--mono);color:var(--amber);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.7rem}
.ac-inner p,.ac-inner li{color:var(--muted);font-size:14.5px}
.ac-inner li{padding-left:1.2rem;position:relative;margin-bottom:.4rem}
.ac-inner li::before{content:"—";position:absolute;left:0;color:var(--amber)}

/* ---------- 19. Marquee (sectores) ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);padding-block:clamp(20px,2.4vw,32px)}
.marquee-track{display:inline-flex;animation:ceMarq 40s linear infinite;will-change:transform}
.marquee-track span{font-family:var(--ce-display);font-weight:800;font-size:clamp(28px,3.4vw,52px);text-transform:uppercase;
  letter-spacing:-.02em;color:var(--ink);padding:0 30px;display:inline-flex;align-items:center;gap:30px}
.marquee-track span .dia{color:var(--amber);font-size:.5em}

/* ---------- 20. Ficha de servicio ---------- */
.ficha{display:grid;grid-template-columns:1.7fr .9fr;gap:clamp(28px,3vw,56px);align-items:start}
.prose h2{font-size:var(--step-2);margin-top:2.4rem}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--fg)}
.prose ul{margin:0 0 1.2rem}
.prose li{padding-left:1.4rem;position:relative;margin-bottom:.55rem;color:var(--fg);list-style:none}
.prose li::before{content:"—";position:absolute;left:0;color:var(--amber)}
.aside-card{position:sticky;top:120px;background:var(--bg-2);border:1px solid var(--line);border-top:2px solid var(--amber);padding:1.8rem}
.aside-card h3{color:var(--ink)}
.faq{border-top:1px solid var(--line);margin-top:.5rem}
.faq details{border-bottom:1px solid var(--line);padding:.4rem 0}
.faq summary{cursor:pointer;font-family:var(--body);font-weight:600;color:var(--ink);padding:.8rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--amber);font-size:1.3em;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin:.2rem 0 .9rem}
.pill{display:inline-block;font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);border:1px solid var(--line);padding:.45rem .8rem}

/* ---------- 21. Recursos / Blog ---------- */
.post{display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;
  transition:background .25s var(--ease),border-color .25s}
.post:hover{background:var(--bg-3);border-color:rgba(229,147,58,.5)}
.post .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#0a262c,#071f24);position:relative;overflow:hidden}
.post .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) contrast(1.05) brightness(.7)}
.post .thumb::after{content:"";position:absolute;top:18px;left:18px;width:20px;height:20px;border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
.post .thumb .tag{position:absolute;left:1rem;bottom:1rem;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-ink);background:var(--amber);padding:.35rem .6rem;font-weight:600}
.post .body{padding:1.4rem}
.post h3{color:var(--ink);margin-bottom:.4rem}
.post .meta{color:var(--dim);font-family:var(--mono);font-size:12px;letter-spacing:.06em;margin-top:.9rem;display:flex;gap:.7rem;flex-wrap:wrap}
.post .meta time{color:var(--dim)}
.post .more{display:inline-flex;gap:.4rem;color:var(--amber);font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.post.is-hidden{display:none}
.grid.cols-3 .post{margin:-1px 0 0 -1px}

.feature{display:grid;grid-template-columns:1.05fr .95fr;background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
.feature .media{position:relative;min-height:320px;background:linear-gradient(135deg,#0a262c,#071f24)}
.feature .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.4) contrast(1.05) brightness(.68)}
.feature .media::after{content:"";position:absolute;top:20px;left:20px;width:24px;height:24px;border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
.feature .media .tag{position:absolute;left:1.2rem;top:1.2rem;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-ink);background:var(--amber);padding:.4rem .7rem;font-weight:600}
.feature .body{padding:clamp(1.8rem,1.2rem + 2.4vw,3rem);display:flex;flex-direction:column;justify-content:center}
.feature h2{font-size:var(--step-2);margin-bottom:1.2rem}
.feature .excerpt{color:var(--muted)}
.feature .more{margin-top:1.2rem;display:inline-flex;gap:.5rem;color:var(--amber);font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- 22. Artículo ---------- */
.article{max-width:46rem;margin-inline:auto}
.article .lead{font-family:var(--body);font-size:var(--step-1);color:var(--ink)}
.article .prose h2{font-size:var(--step-2);margin-top:2.4rem}
.article .prose h3{font-size:var(--step-1);margin-top:1.8rem;color:var(--ink);text-transform:none}
.article .prose p{color:var(--fg)}
.article figure{margin:2.2rem 0}
.article figure .ph{aspect-ratio:16/9;background:linear-gradient(135deg,#0a262c,#071f24);position:relative;overflow:hidden;border:1px solid var(--line)}
.article figure .ph::after{content:"";position:absolute;top:18px;left:18px;width:22px;height:22px;border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
.article figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--dim);margin-top:.7rem;text-align:center}
.post-meta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-top:1rem}
.post-meta .cat{background:var(--amber);color:var(--amber-ink);padding:.35rem .7rem;font-weight:600;font-size:11px;letter-spacing:.08em}
.author-box{display:flex;gap:1rem;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-left:2px solid var(--amber);padding:1.3rem 1.5rem;margin-top:2.6rem}
.author-box .av{width:52px;height:52px;flex:none;background:linear-gradient(135deg,#0a262c,#071f24);border:1px solid var(--line)}
.author-box .n{font-family:var(--body);font-weight:600;color:var(--ink)}
.author-box .r{color:var(--muted);font-size:13.5px}

/* ---------- 23. Formularios ---------- */
.form{background:var(--bg-2);border:1px solid var(--line);border-top:2px solid var(--amber);padding:clamp(1.4rem,1rem + 1.5vw,2.4rem)}
.field{margin-bottom:1.2rem}
.field label{display:block;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:var(--step-0);
  padding:.8rem .9rem;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);transition:border-color .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--amber) 50%),linear-gradient(135deg,var(--amber) 50%,transparent 50%);
  background-position:calc(100% - 20px) 1.15em,calc(100% - 14px) 1.15em;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber);background:var(--bg-3)}
.field textarea{resize:vertical;min-height:120px}
.field .help{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--dim);margin-top:.4rem;text-transform:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.conditional{display:none;border-left:2px solid var(--amber);padding-left:1rem;margin:0 0 1.2rem;animation:slidein .35s var(--ease)}
.conditional.show{display:block}
.dropzone{border:1px dashed var(--line);border-radius:0;padding:1.5rem;text-align:center;color:var(--muted);cursor:pointer;
  transition:border-color .2s,background .2s;background:var(--bg)}
.dropzone:hover{border-color:var(--amber);background:var(--bg-3)}
.disclaimer{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:.6rem;text-transform:none;letter-spacing:.02em}
.form-note{font-size:var(--step--1);color:var(--muted)}
.form-result{color:var(--amber)!important;font-family:var(--mono)!important;font-weight:600;letter-spacing:.04em}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,3vw,56px);align-items:start}
.info-block{margin-bottom:1.6rem}
.info-block .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:.35rem}
.info-block .v{color:var(--fg)}
.info-block .v a{color:var(--ink)}
.info-block .v a:hover{color:var(--amber)}
.map{aspect-ratio:4/3;border:1px solid var(--line);background:linear-gradient(135deg,#0a262c,#071f24);
  position:relative;overflow:hidden;display:grid;place-items:center;color:var(--muted);font-family:var(--mono);font-size:12px}
.map::before{content:"";position:absolute;top:18px;left:18px;width:22px;height:22px;border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
.pin{width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--amber);transform:rotate(-45deg)}

/* ---------- 24. Utilidades varias ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,56px);align-items:center}
.lede{font-size:var(--step-1);color:var(--ink)}
.quote{font-family:var(--body);font-weight:500;font-size:var(--step-2);line-height:1.3;
  color:var(--ink);border-left:2px solid var(--amber);padding-left:1.5rem}
.value-list{display:grid;gap:1rem}
.value-list li{padding-left:1.6rem;position:relative;color:var(--fg)}
.value-list li::before{content:"—";position:absolute;left:0;color:var(--amber)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.member{text-align:left;padding:1.4rem 1.2rem;border:1px solid var(--line);margin:-1px 0 0 -1px;background:var(--bg-2)}
.member .ph{aspect-ratio:1;background:linear-gradient(135deg,#0a262c,#071f24);margin-bottom:1rem;position:relative;overflow:hidden;border:1px solid var(--line)}
.member .ph::after{content:"";position:absolute;top:14px;left:14px;width:18px;height:18px;border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
.member h4{margin:0 0 .2rem;color:var(--ink)}
.member span{color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.logos-row{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:center}
.logos-row span{font-family:var(--ce-display);font-weight:800;color:var(--muted);font-size:var(--step-1);text-transform:uppercase;letter-spacing:-.01em}

/* ---------- 25. Animaciones de scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}

/* ---------- 26. Páginas legales ---------- */
.legal{max-width:80ch}
.legal h2{font-size:var(--step-2);margin-top:2.4rem}
.legal p,.legal li{color:var(--fg)}
.legal li{margin-bottom:.45rem;padding-left:1.3rem;position:relative;list-style:none}
.legal li::before{content:"—";position:absolute;left:0;color:var(--amber)}

/* ---------- 27. Responsive ---------- */
@media(max-width:1180px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);padding:1rem clamp(20px,3vw,44px) 1.4rem}
  .nav-links.open a{width:100%;padding:.9rem 0;border-bottom:1px solid var(--line-soft)}
  .nav-toggle{display:block}
}
@media(max-width:960px){
  .cols-4,.stats,.team-grid{grid-template-columns:repeat(2,1fr)}
  .cols-3,.ac-inner{grid-template-columns:repeat(2,1fr)}
  .lab-split,.ficha,.contact-grid,.split{grid-template-columns:1fr}
  .aside-card{position:static}
  .feature{grid-template-columns:1fr}
  .feature .media{min-height:220px}
}
@media(max-width:720px){
  .cols-2,.cols-3,.cols-4,.stats,.method-track,.ac-inner,.team-grid{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .pillar,.stat,.step{border-right:0}
  .doss-row{grid-template-columns:56px 1fr auto;gap:14px}
  .hero-coords{display:none}
  .cta-band{flex-direction:column;align-items:flex-start}
  .nav-cta a.btn{display:none}
}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ---------- 28. Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .ticker-track,.marquee-track{animation:none}
}

/* ============================================================
   MIX2 — variante intermedia con MÁS peso de 1/web (dossier oscuro).
   Base: 1/web (estructura dossier + menú web). Ajustes hacia 2/ceips2:
   · base cromática PETRÓLEO cálido en lugar del casi-negro (#05171b),
   · reaparición de la DIAGONAL naranja (skew -24deg) como leitmotiv,
   · citas en serif (Source Serif) e imágenes algo menos desaturadas.
   ============================================================ */
:root{
  --bg:#062329;        /* petróleo profundo (ceips2) — más cálido que #05171b */
  --bg-2:#0a3c45;      /* panel petróleo (ceips2 petrol-800) */
  --bg-3:#0f4a55;      /* hover / inputs */
  --amber-ink:#062329;
  --font-serif:'Source Serif 4',Georgia,serif;
}
.site-header{background:rgba(6,35,41,.72)}

/* La diagonal (skew -24deg) vuelve como leitmotiv */
.diag::after{transform:skewX(-24deg)}
.center .diag::after,.diag.center::after{transform:translateX(-50%) skewX(-24deg)}
.hero-headline::after{content:"";display:block;width:clamp(80px,10vw,150px);height:5px;
  background:var(--amber);transform:skewX(-24deg);margin-top:.4em}
.kicker::before,.filerow .dot-amber{transform:none}

/* Cita en serif (calidez ceips2) */
.quote{font-family:var(--font-serif);font-style:italic;text-transform:none;font-weight:400;letter-spacing:0}

/* Imágenes un punto más cálidas que en 1/web (menos desaturación) */
.hero-band img,.pagehero .hero-media img,.post .thumb img,.feature .media img,.article figure .ph{
  filter:grayscale(.18) contrast(1.03) brightness(.82)}

/* ============================================================
   MIX3 — versión CLARA de mix2. Vuelca la base cromática a papel cálido
   conservando TODA la estructura dossier (Archivo, ticker, lista-dossier,
   crosshairs, marquee, método de números fantasma) y la diagonal. Los
   héroes siguen siendo bandas de imagen oscuras (como en 2/ceips2).
   ============================================================ */
:root{
  --bg:#f6f4ee;        /* papel cálido */
  --bg-2:#ffffff;      /* paneles / tarjetas */
  --bg-3:#eeede3;      /* hover / inputs */
  --ink:#1e2b18;       /* verde muy oscuro — titulares */
  --fg:#2b322a;        /* carbón verdoso — cuerpo */
  --muted:#5c6659;     /* secundario */
  --dim:#79836f;       /* etiquetas mono */
  --faint:#98a195;     /* pie / marcas de agua */
  /* El acento sale del extremo oscuro del degradado del logotipo
     (#9CDF55 -> #509007), subido a #47800A para ganar contraste: sobre el
     papel da 4,38:1, frente a los 3,58:1 del verde original del logo y los
     3,09:1 del ámbar al que sustituye. El nombre de la variable se conserva
     —«--amber»— porque lo referencian decenas de reglas de esta hoja;
     renombrarlo era mucho riesgo a cambio de nada. */
  --amber:#47800a;     /* verde de acento */
  --amber-ink:#ffffff; /* texto sobre el acento */
  --line:rgba(30,43,24,.15);
  --line-soft:rgba(30,43,24,.08);
}
/* Cabecera clara translúcida */
.site-header{background:rgba(246,244,238,.86)}
/* Hover de botón legible en claro (petróleo + texto blanco) */
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
/* Filerow del hero sobre fondo claro */
.filerow{color:var(--muted);border-bottom-color:var(--line)}
/* Los page-hero siguen siendo bandas de imagen oscuras -> texto claro forzado */
.pagehero h1{color:#fff}
.pagehero p{color:#dfe8e7}
.pagehero .post-meta{color:#d7e3e3}
/* Números fantasma (método / servicios) legibles sobre claro */
.step .dot{color:rgba(30,43,24,.14)}
.step:last-child .dot{color:rgba(71,128,10,.6)}
.svc-block .knum{color:rgba(30,43,24,.14)}

/* ---------- 29. Refuerzo tipográfico frente al kit de Elementor ----------
   El kit aplica la familia en «.elementor-kit-N h1..h6» (misma especificidad
   que algunas reglas del diseño). Reaseguramos las excepciones display. */
body .doss-row h3,
body .svc-block .bar h2,
body .feature h2,
body .ac-head{font-family:var(--ce-display)}
body .eyebrow,body .reg,body .kcat,body .pill,body .breadcrumb,
body .filerow,body .nav-links a,body .chip,body .ticker-track,
body .doss-code,body .stat .label,body .post .meta,body .field label{font-family:var(--mono)}
body .quote{font-family:var(--font-serif)}

/* ---------- 30. Serif ----------
   OJO: el diseño de referencia vigente (Workspace\ceips) usa Source Serif 4
   SOLO en las citas (.quote). Los títulos de la lista de servicios y el
   teléfono van en Archivo, así que aquí ya no se fuerza el serif. */

/* ---------- 31. Separación texto / líneas divisorias ----------
   Las columnas con divisor vertical (pilares, cifras y pasos del método)
   tenían padding-left:0, con lo que el texto quedaba pegado a la línea de
   la columna anterior. Se añade aire a la izquierda; la primera columna de
   cada fila mantiene 0 para alinear con el encabezado de la sección. */
.pillar,.stat,.step{padding-left:20px}
.pillar:first-child,.stat:first-child,.step:first-child{padding-left:0}
@media(max-width:960px){
  /* .stats y .cols-3 pasan a 2 columnas: los impares abren fila */
  .pillar:nth-child(odd),.stat:nth-child(odd){padding-left:0}
}
@media(max-width:720px){
  /* una sola columna, sin divisores: sin sangría */
  .pillar,.stat,.step{padding-left:0}
}

/* ---------- 32. Neutralizar el hover rosa del tema padre ----------
   hello-elementor/assets/css/reset.css trae de serie
   «button:hover{background-color:#c36;color:#fff}». Cualquier <button> del
   diseño que no declare su propio fondo al pasar el ratón (el acordeón de
   Sectores, los chips de filtro) se teñía de rosa. Se anula con selectores
   de mayor especificidad que la del padre (0,1,2 frente a 0,1,1), así que
   no depende del orden en que se carguen las hojas. Los botones que sí
   definen su hover (.btn, con 0,2,0) siguen mandando sobre esta regla. */
body button:hover,body button:focus,
body [type="button"]:hover,body [type="button"]:focus,
body [type="submit"]:hover,body [type="submit"]:focus{
  background-color:transparent;color:inherit}

/* ============================================================
   33. APOYO A LA CONSTRUCCIÓN NATIVA (clases ce-*)
   Las páginas reconstruidas con contenedores y widgets de Elementor
   llevan sus estilos en los paneles del editor. Aquí queda SOLO lo
   que los controles de Elementor no saben expresar: el trazo hueco
   del titular, las barras diagonales, las hairlines por lado (el
   control de borde de Elementor usa un único color para los cuatro)
   y las esquinas en ángulo del hero.
   ============================================================ */

/* Titular del hero: palabra hueca + barra diagonal */
.ce-hueco{color:transparent;-webkit-text-stroke:1.5px var(--amber)}
.ce-hero-titular .elementor-heading-title{line-height:.88}
.ce-hero-titular .elementor-heading-title::after{content:"";display:block;
  width:clamp(80px,10vw,150px);height:5px;background:var(--amber);
  transform:skewX(-24deg);margin-top:.4em}

/* Antetítulo: la marca «§» del diseño va como pseudoelemento (en el modelo es
   .eyebrow::before), no como texto, para que no aparezca en el campo del editor. */
.ce-antetitulo .elementor-heading-title::before{content:"§";margin-right:.7rem;
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace}

/* Barra diagonal bajo los titulares de sección */
.ce-diag .elementor-heading-title{position:relative;display:inline-block}
.ce-diag .elementor-heading-title::after{content:"";position:absolute;left:0;bottom:-.34em;
  height:3px;width:46px;background:var(--amber);transform:skewX(-24deg)}
.ce-diag-centro .elementor-heading-title::after{left:50%;transform:translateX(-50%) skewX(-24deg)}

/* Fila de datos del hero y banda de imagen */
.ce-filerow{border-bottom:1px solid var(--line)}
.ce-hero-banda{border-top:1px solid var(--line);position:relative;overflow:hidden}

/* Foto del hero: va como widget Imagen (no como fondo del contenedor) para
   conservar el alt editable en Medios. Los filtros son controles del panel;
   el encuadre vertical y el recorte, no. */
.elementor-element.ce-hero-foto{position:absolute;inset:0;width:100%;z-index:0}
.ce-hero-foto figure,.ce-hero-foto a{height:100%}
.ce-hero-foto img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
/* Degradado de la banda: el panel solo admite dos paradas, el modelo usa cuatro.
   (En Elementor 4.2 el widget Imagen ya no envuelve en .elementor-widget-container,
   así que el degradado cuelga del propio widget.) */
.ce-hero-foto::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(10,22,8,.92) 0%,rgba(10,22,8,.35) 42%,
    rgba(10,22,8,.15) 70%,rgba(10,22,8,.55) 100%)}
/* El resto del contenido de la banda, por encima de foto y degradado */
.ce-hero-banda > .elementor-element:not(.ce-hero-foto){position:relative;z-index:2}

/* Esquinas en ángulo de la banda (el contenedor es «a todo el ancho», así que
   no tiene .e-con-inner del que colgarlas: van en sus propios pseudos, que
   quedaron libres al pasar la foto a widget). */
.ce-hero-banda::before,.ce-hero-banda::after{content:"";position:absolute;
  width:26px;height:26px;z-index:3;pointer-events:none}
.ce-hero-banda::before{top:20px;left:20px;
  border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
.ce-hero-banda::after{bottom:20px;right:20px;
  border-bottom:2px solid var(--amber);border-right:2px solid var(--amber)}

/* Aro ámbar intermitente sobre la foto (leitmotiv del modelo). */
.elementor-element.ce-hero-marca{position:absolute;top:44%;left:34%;width:14px;height:14px;
  min-height:0;border:2px solid var(--amber);border-radius:50%;z-index:3;pointer-events:none;
  animation:ceParpadeo 2s ease-in-out infinite}
@keyframes ceParpadeo{0%,100%{opacity:1}50%{opacity:.25}}
/* Columnas con hairline: filete ámbar arriba y divisoria a la derecha */
.ce-pilar,.ce-paso{border-top:2px solid var(--amber);border-right:1px solid var(--line)}
.ce-cifra{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.ce-sin-linea{border-right:0}

/* Lista de servicios */
.ce-doss{border-top:1px solid var(--line)}
.ce-doss-fila{border-bottom:1px solid var(--line);transition:background .25s,padding .25s}
.ce-doss-fila:hover{background:rgba(229,147,58,.08);padding-left:22px}
.elementor-element.ce-doss-code{width:88px;flex:0 0 88px}
.elementor-element.ce-doss-cuerpo{width:auto;flex:1 1 auto}
.elementor-element.ce-doss-flecha{width:auto;flex:0 0 auto}

/* Tarjeta del formulario de contacto: filete ámbar arriba (el control de borde
   de Elementor usa un solo color para los cuatro lados). */
.ce-form-marco{border-top:2px solid var(--amber)}

/* Banda de llamada a la acción */
.ce-cta-banda{border:1px solid var(--line);border-top:2px solid var(--amber)}
/* Sus dos bloques se dimensionan por contenido y bajan de línea solo cuando no
   caben (en el modelo son hijos flex con ancho natural). Los contenedores de
   Elementor son width:100% por defecto, que forzaría siempre dos filas. */
.ce-cta-banda > .e-con{width:auto;max-width:100%}

/* Rombo separador de la marquesina de sectores */
.ce-dia{color:var(--amber);font-size:.5em;vertical-align:middle}

/* Hero de página interior: esquinas en ángulo (van en el interior para no
   pisar la superposición degradada, igual que en el hero de portada). */
.ce-pagehero{border-bottom:1px solid var(--line);overflow:hidden}
.ce-pagehero > .e-con-inner::before,.ce-pagehero > .e-con-inner::after{content:"";
  position:absolute;width:24px;height:24px;z-index:3;pointer-events:none}
.ce-pagehero > .e-con-inner::before{top:18px;left:18px;
  border-top:2px solid var(--amber);border-left:2px solid var(--amber)}
.ce-pagehero > .e-con-inner::after{bottom:18px;right:18px;
  border-bottom:2px solid var(--amber);border-right:2px solid var(--amber)}
.ce-migas .elementor-heading-title{display:flex;gap:.6rem;flex-wrap:wrap}

/* Tarjetas: el borde de contenedor de Elementor usa un solo color para los
   cuatro lados, así que el filete superior ámbar va aquí. */
.ce-card{border:1px solid var(--line);position:relative;transition:background .25s,border-color .25s}
.ce-card:hover{border-color:rgba(71,128,10,.5)}
/* En el modelo el filete ámbar de la tarjeta NO está siempre: crece al pasar
   el ratón (.card::before de 0 a 46px). */
.ce-card::before{content:"";position:absolute;top:-1px;left:-1px;width:0;height:2px;
  background:var(--amber);transition:width .3s cubic-bezier(.22,.61,.36,1);z-index:1}
.ce-card:hover::before{width:46px}
/* Rejilla de tarjetas: contiguas, sellando el filete compartido */
.ce-cols-3 .ce-card,.ce-cols-2 .ce-card,.ce-cols-4 .ce-card{margin:-1px 0 0 -1px}
.ce-card:hover .ce-ico .elementor-icon{border-color:var(--amber);background:rgba(71,128,10,.1)}

/* Marco del icono: en la vista «enmarcada» Elementor ata el color del borde
   al del propio icono (un solo control), y el diseño pide trazo ámbar sobre
   marco de hairline. Se separa aquí. */
.ce-ico .elementor-icon{border-color:var(--line);transition:border-color .25s,background .25s}

/* Cita en serif del bloque de trayectoria */
.ce-cita{border-left:2px solid var(--amber);padding-left:24px}

/* Placeholder de las fichas de equipo (retrato pendiente). El modelo lo deja
   cuadrado con aspect-ratio; sin él el contenedor vacío no tiene altura. */
/* El degradado del placeholder va en el panel (Fondo > Degradado); aquí solo
   lo que el panel no da: proporción cuadrada y la marca de esquina. */
.elementor-element.ce-ph{aspect-ratio:1;position:relative;overflow:hidden;margin-bottom:1rem}
.ce-ph::after{content:"";position:absolute;top:14px;left:14px;width:18px;height:18px;
  border-top:2px solid var(--amber);border-left:2px solid var(--amber)}

/* Coordenadas del hero: esquina superior derecha de la banda */
.elementor-element.ce-hero-coords{position:absolute;top:clamp(20px,3vw,40px);right:clamp(20px,3vw,44px);z-index:2;width:auto}

/* Menú: la página activa va entre corchetes, como en el diseño.
   Elementor reserva ::before/::after del ítem para su «puntero» (subrayado):
   los deja en position:absolute, con fondo y tamaño fijos, así que el corchete
   salía como un cuadro macizo. Hay que devolverlos a texto en línea.
   Además el woff2 autoalojado de IBM Plex Mono no trae el glifo del corchete:
   sin familia de reserva el navegador pintaría un tofu. */
.ce-nav .elementor-nav-menu--main .elementor-item.elementor-item-active::before,
.ce-nav .elementor-nav-menu--main .elementor-item.elementor-item-active::after{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  position:static;display:inline;background:none;width:auto;height:auto;
  transform:none;transition:none;opacity:1}
.ce-nav .elementor-item-active::before{content:"[\00A0"}
.ce-nav .elementor-item-active::after{content:"\00A0]"}

/* Cabecera nativa: ticker y menú en una sola línea.
   El color va en el marco (.ce-ticker-marco) y la animación en la cinta
   (.ce-ticker): si el fondo viaja con la cinta, al desplazarse deja el hueco. */
.ce-ticker-marco{overflow:hidden}
.elementor-element.ce-ticker{width:max-content;flex-wrap:nowrap}
.ce-ticker > .elementor-element{flex:0 0 auto;white-space:nowrap}
.ce-nav .elementor-nav-menu--main .elementor-item{white-space:nowrap}
.ce-nav .elementor-nav-menu{flex-wrap:nowrap}
.ce-logo-widget img{height:80px;width:auto;max-width:none}
@media(max-width:1180px){.ce-logo-widget img{height:58px}}

/* El pie va sobre el papel de fondo, como en el diseño de referencia: su color
   y su filete superior se fijan en el panel del contenedor (Fondo / Borde). */

/* Marquesina de sectores (construcción nativa)
   El contenedor hace de pista: lleva .marquee-track (sección 19) y dentro los
   seis rótulos duplicados. Traía overflow:hidden sobre sí mismo y heredaba el
   width:100% de .e-con, así que la pista medía el ancho de la ventana en vez
   del de su contenido: los rótulos que sobraban se recortaban y, sobre todo,
   el translateX(-50%) de ceMarq desplazaba media PANTALLA en lugar de media
   PISTA, con lo que el bucle saltaba y el rótulo se cortaba a media palabra.
   La pista pasa a medir su contenido (max-content) —única forma de que el
   -50% caiga justo en la segunda copia— y el recorte lo hace el overflow-x:
   clip de html/body (sección 2), que además no rompe el sticky de la cabecera
   como sí haría un overflow:hidden aquí. */
.ce-marquesina{display:flex;flex-wrap:nowrap;
  --width:max-content;width:max-content;max-width:none;overflow:visible}
.ce-marquesina > .elementor-element{flex:0 0 auto;white-space:nowrap}

/* El rombo separador es el único <span> que queda en el marcado nativo, así
   que se estaba comiendo las reglas de «.marquee-track span», escritas para
   los rótulos del marcado antiguo (52px y padding 0 30px). Se le devuelve su
   tamaño y su ámbar; el rótulo ya se estiliza desde el panel del widget. */
.ce-marquesina .dia{display:inline-block;font-size:.5em;color:var(--amber);
  padding:0;gap:0;vertical-align:middle}

/* Acordeón nativo: hairlines entre paneles en vez del marco por defecto */
.ce-acordeon .e-n-accordion-item{border-bottom:1px solid var(--line)}
.ce-acordeon .e-n-accordion-item-title{padding-inline:4px}
/* PENDIENTE: el control de color de título del acordeón anidado no responde
   al ajuste por código; el color y la posición del indicador se fijan aquí
   hasta localizar el control correcto en el panel. */
.ce-acordeon .e-n-accordion-item-title-text{color:var(--ink)}
.ce-acordeon .e-n-accordion-item:hover .e-n-accordion-item-title-text{color:var(--amber)}
.ce-acordeon .e-n-accordion-item-title-header{order:1;flex:1 1 auto}
.ce-acordeon .e-n-accordion-item-title-icon{order:2;margin-left:auto;color:var(--amber)}
.ce-acordeon summary::marker,.ce-acordeon summary::-webkit-details-marker{display:none;content:""}

/* Listas con guion ámbar dentro del acordeón */
.ce-lista .elementor-icon-list-text{position:relative;padding-left:1.2rem}
.ce-lista .elementor-icon-list-text::before{content:"—";position:absolute;left:0;color:var(--amber)}
.ce-lista .elementor-icon-list-icon{display:none}

/* Fila de acreditaciones */
.ce-logos{border-top:1px solid var(--line);padding-top:26px}

/* Cuerpo de las páginas legales: prosa en un solo Editor de texto. El tamaño
   de sus h2 no se puede fijar desde el panel del widget (Elementor solo
   estiliza el texto base), así que va aquí. */
.ce-legal{max-width:80ch}
.ce-legal h2{font-size:var(--step-2);line-height:.98;margin:2.4rem 0 .5em}
.ce-legal li{margin-bottom:.45rem;padding-left:1.3rem;position:relative;list-style:none}
.ce-legal li::before{content:"—";position:absolute;left:0;color:var(--amber)}

@media(max-width:767px){
  /* Sin divisorias verticales al apilar */
  .ce-pilar,.ce-paso,.ce-cifra{border-right:0}
  .ce-doss-fila{padding-left:0}
  .elementor-element.ce-doss-code{width:auto;flex:0 0 auto}
}

/* Hover propio del acordeón: el mismo lavado ámbar de .doss-row. */
.ac-head:hover,.ac-head:focus-visible{background:rgba(229,147,58,.06);color:var(--amber)}
.chip:hover,.chip:focus-visible{background:rgba(229,147,58,.06)}

/* ============================================================
   34. CHIPS DE FILTRO HECHOS CON EL WIDGET BOTÓN DE ELEMENTOR
   En /recursos/ los chips son <button class="chip"> de verdad
   (shortcode), así que la sección 16 les cae directa y bien.
   En /servicios/ la página está reconstruida en nativo: la clase
   «chip» quedó en el ENVOLTORIO del widget (div.elementor-widget-
   button) y el elemento visible es el <a.elementor-button> de
   dentro, que ya trae su propio recuadro desde el panel del
   editor. Con lo cual se pintaban dos cajas anidadas y el
   «[ » / « ]» invisible de .chip::before/::after ensanchaba cada
   envoltorio de forma desigual.
   Aquí se vacía el envoltorio y se deja mandar al botón interior;
   lo único que se añade es el estado activo, porque aria-pressed
   no se puede expresar con los controles de Elementor.
   ============================================================ */
.chips .chip.elementor-widget-button{
  padding:0;border:0;background:transparent;flex:0 0 auto;line-height:0}
.chips .chip.elementor-widget-button::before,
.chips .chip.elementor-widget-button::after{content:none}
.chips .chip.elementor-widget-button .elementor-button{
  cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}

/* Estado activo del filtro: relleno ámbar, igual que .chip[aria-pressed]. */
body .chips .chip.elementor-widget-button[aria-pressed="true"] .elementor-button,
body .chips .chip.elementor-widget-button[aria-pressed="true"] .elementor-button:hover{
  background-color:var(--amber);color:var(--amber-ink);border-color:var(--amber)}

/* ============================================================
   Marcas / compañías  —  [ceips_marcas]
   Fila de aseguradoras en Inicio, entre «Cómo trabajamos» y el CTA.

   La sección que la envuelve es un CLON de «Colegiados y homologados» (Quiénes
   somos): mismo relleno, misma tipografía y mismo fondo, porque se copió el
   contenedor en lugar de rehacerlo. De ahí que aquí no haya ni antetítulo ni
   filete: los pone Elementor —el contenedor padre lleva la clase «ce-logos»,
   que ya dibuja la línea superior y su padding— y sus textos se editan desde
   el escritorio. Este bloque solo resuelve la fila de logotipos.

   Se apoya en «.logos-row» (sección 24), que estaba en la hoja sin usarla
   ninguna página: describía justo esta pieza —nombres en display sobre
   --muted— y sigue siendo el aspecto de reserva mientras falte un logotipo.

   La fila es una CINTA EN MARCHA en todos los tamaños. Antes estaba quieta en
   escritorio, con el argumento de que las seis marcas caben en una línea y de
   que la cabecera ya lleva un .ticker-track permanente; se cambió a petición
   expresa. Para que los dos movimientos no compitan, esta cinta va mucho más
   lenta que el ticker (--marcas-vel, 45s frente a 32s) y se DETIENE al pasar
   el puntero por encima, que es además la forma de leer una marca concreta.
   Los logotipos van a color pleno, sin el desaturado que llevaban antes.
   ============================================================ */
/* «--marca-alto-base» es la altura de referencia y el único mando: el shortcode
   la puede pisar en línea desde Elementor ([ceips_marcas alto="56"]) sin tocar
   esta hoja. Todo lo demás —el factor óptico de cada marca, la reducción de
   pantallas medias y la velocidad de la cinta— se calcula a partir de ella. */
.marcas-viewport{--marca-alto-base:clamp(28px,3.2vw,42px);
  --marca-alto:var(--marca-alto-base);--marcas-vel:45s;
  overflow:hidden;white-space:nowrap}

/* La pista mide su CONTENIDO, no la ventana: es la condición para que el
   translateX(-50%) de ceMarq caiga justo en la segunda copia y el bucle no
   tenga costura. Mismo fotograma que .ticker-track y .marquee-track.

   «width:max-content» y los «flex:0 0 auto» de abajo no son adorno: sin ellos
   la pista se ajusta al ancho de la ventana y, al no caber doce logotipos, el
   reparto flex los ENCOGE. La altura la fija el CSS y el ancho es automático,
   así que encogerlos no los reduce: los aplasta. AXA, que es el más ancho, se
   quedaba en una tira azul vertical. Es el mismo tropiezo que ya documenta
   .ce-marquesina en la sección de Sectores, y se cura igual. */
.marcas-track{display:inline-flex;width:max-content;max-width:none;
  animation:ceMarq var(--marcas-vel) linear infinite;will-change:transform}

/* Se para bajo el puntero: es la única manera de detenerse a mirar una marca
   concreta sin perseguirla. El focus-within cubre el recorrido con teclado. */
.marcas-viewport:hover .marcas-track,
.marcas-viewport:focus-within .marcas-track{animation-play-state:paused}

/* Sin gap y con el aire dentro de cada <li>: los dos juegos han de medir
   EXACTAMENTE lo mismo, y un gap entre elementos deja fuera el hueco final,
   que es por donde se colaría el salto.

   El padding es la MITAD del hueco que se busca, porque cada logotipo pone su
   parte a cada lado. La fila quieta llevaba gap:clamp(24px,2.8vw,40px), así
   que la mitad reproduce exactamente la separación que tenía antes. */
.marcas-set{margin:0;padding:0;list-style:none;width:auto;
  display:inline-flex;flex-wrap:nowrap;flex:0 0 auto;gap:0}
.marcas-set li{display:inline-flex;align-items:center;flex:0 0 auto;
  padding:0 clamp(12px,1.4vw,20px)}

/* Altura ÓPTICA, que no es la geométrica.
   Poner la misma altura a los seis NO los iguala: sus proporciones van de 2.4
   (MGS) a 6.6 (MAPFRE, rótulo largo), y a igual altura el rótulo largo parece
   enorme y el compacto insignificante. El factor de cada marca sale de igualar
   el ÁREA DE TRAZO —proporción por densidad de tinta, medida sobre el fichero
   ya recortado— y está acotado a [.70, 1.25]: sin tope MGS se iba a 1.58,
   porque su rótulo lleva mucho aire interno, y al agrandarlo se comía la fila.
   Son valores para afinar a ojo; cambiarlos aquí no obliga a reexportar nada.

   AXA es el caso aparte: su logotipo es campo azul macizo, no trazo sobre
   blanco, así que a igual altura pesa mucho más que los demás. Venía en 1.04
   cuando el fichero era CUADRADO y quedaba raquítico junto al resto. El
   fichero que entregó el cliente es apaisado (200×100, proporción 2), la más
   compacta de las seis, así que necesita el factor ALTO —el mismo 1.25 que
   MGS— para que su ancho no se descuelgue de la fila. Se comparó contra 1.0,
   1.15 y 1.4: por debajo queda raquítico al lado de Allianz y por encima el
   campo azul se convierte en un ladrillo que domina la banda. */
.marca{--marca-escala:1}
.marca--mgs{--marca-escala:1.25}
.marca--axa{--marca-escala:1.25}
.marca--verti{--marca-escala:1}
.marca--allianz{--marca-escala:.87}
.marca--mutua-madrilena{--marca-escala:.8}
.marca--mapfre{--marca-escala:.7}

/* Anchura libre: recortar cada marca a una caja fija la deformaría.
   A COLOR PLENO, sin filtro. Antes iban desaturadas al 35% y se encendían al
   pasar por encima, para que la fila no compitiera con el resto de la página;
   se quitó a petición expresa. Son marcas de terceros y su color es parte de
   su identidad, así que mostrarlas apagadas las representaba mal. */
.marcas-set img{display:block;width:auto;flex:0 0 auto;
  height:calc(var(--marca-alto) * var(--marca-escala))}

/* La copia es la que cierra el bucle: al desplazar -50% ocupa exactamente el
   sitio donde arrancó la primera. Ahora que la cinta corre siempre, va visible
   en todos los tamaños. Lleva aria-hidden en el marcado para que un lector de
   pantalla no anuncie las marcas dos veces. */
.marcas-dup{display:inline-flex}

@media(max-width:960px){
  /* Proporción de la altura de referencia, no un número fijo: si la subes
     desde el shortcode, esta baja con ella en vez de quedarse descolgada. */
  .marcas-viewport{--marca-alto:calc(var(--marca-alto-base) * .76)}
}

@media(max-width:720px){
  /* Más rápida donde el recorrido visible es corto: a 45s la cinta parecería
     detenida en un móvil, porque la ventana muestra dos marcas y media. */
  .marcas-viewport{--marcas-vel:26s}
  .marcas-set li{padding:0 22px}
}

/* Con la animación detenida, una cinta recortada dejaría marcas inalcanzables:
   se oculta la copia y el carril pasa a arrastrarse a mano. */
@media(prefers-reduced-motion:reduce){
  .marcas-track{animation:none}
  .marcas-viewport{overflow-x:auto}
  .marcas-dup{display:none}
}




/* ---------- Tabla de cookies (política de cookies) ----------
   El contenedor hace de carril: en móvil la tabla se desplaza dentro de él
   en vez de ensanchar la página, que es lo que rompe la maqueta. */
.ce-tabla-cookies{overflow-x:auto;margin:1.4rem 0 2rem;border:1px solid var(--line)}
.ce-tabla-cookies table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--step--1,14px)}
.ce-tabla-cookies th,.ce-tabla-cookies td{
  padding:.7rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.ce-tabla-cookies thead th{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);background:var(--bg-3);border-bottom-color:var(--line)}
.ce-tabla-cookies tbody tr:last-child td{border-bottom:0}
.ce-tabla-cookies code{font-family:var(--mono);font-size:.92em;color:var(--ink)}
.ce-legal .ce-tabla-cookies li{list-style:none}


/* ============================================================
   Cabecera responsive — logotipo, menú y botón

   El logotipo nuevo tiene proporción 11,5:1: a 28px de alto ocupa 322px. El
   menú horizontal pide unos 1.033px entre sus ocho enlaces y el botón «Abrir
   expediente» otros 214px. Sumado el relleno, hacen falta ~1.435px para que
   quepa todo en una línea; por debajo, el menú se comía el botón y el logotipo.

   La salida NO es encoger el logotipo, sino plegar el menú antes: con la
   hamburguesa, el menú pasa de ~1.033px a unos 40px y entonces caben de sobra
   la marca completa, el desplegable y el botón. Por eso el widget del menú
   tiene «dropdown: laptop» y el kit lleva activado el tramo portátil a 1440px.

     > 1440px   marca completa + menú horizontal + botón
     ≤ 1440px   marca completa + hamburguesa + botón   (todo cabe)
     ≤  767px   solo el cuadrado verde: a esos anchos ni la marca completa ni
                el botón dejan sitio, y el símbolo se lee igual de bien.

   El alto se gobierna AQUÍ y no desde el widget: son tres estados y el campo
   «Alto» de Elementor solo expresa uno. El logotipo del PIE sí sigue siendo
   editable desde el editor, que allí no hace falta nada de esto.
   ============================================================ */
.site-header .ce-logo-widget{min-width:0}
.site-header .ce-logo-widget img{height:28px;width:auto;max-width:none}

/* Logotipo CEIPS entre el final del menú y el botón de expediente.

   Es el mismo fichero que el del pie, pero aquí manda el CSS y no el campo
   «Alto» del widget, por el mismo motivo que la marca de la izquierda: la
   cabecera tiene varios estados y el widget solo expresa uno.

   60px de alto, más del doble que la marca de la izquierda. Ese logotipo es
   compacto (124×80, proporción 1.55) y la marca de la izquierda es una tira de
   11,5:1 cuyo alto lo marca un texto en caja baja, así que igualar los dos
   altos de caja dejaría el de CEIPS visualmente diminuto. La cifra la fijó el
   cliente probándola en pantalla, asumiendo que la cabecera crezca a cambio. */
.site-header .ce-logo-marca{flex:0 0 auto;min-width:0}
.site-header .ce-logo-marca img{height:60px;width:auto;max-width:none}

/* Aire propio a la izquierda: el hueco de 20px que reparte la barra basta
   entre piezas de alturas parecidas, pero aquí un logotipo de 60px queda
   pegado al «Contacto» del menú en cuanto la ventana aprieta. */
.site-header .e-con:has(> .ce-logo-marca){margin-inline-start:18px}

/* Las columnas de la cabecera miden SU CONTENIDO.

   Elementor da a cada columna un ancho fijo con «--width»: 200px la de la
   marca y 280px la del botón. La marca ocupa en realidad 322px a 28px de alto,
   así que se salía de su columna y el menú, que arranca donde acaba esa
   columna, se le montaba encima. Al botón le pasaba lo simétrico: cuando el
   sitio apretaba, la columna encogía y el rótulo se partía en dos líneas.

   Se apunta a cada columna por lo que CONTIENE. Ni el id que genera Elementor
   sirve, porque cambia si alguien rehace el widget, ni una clase propia: el
   campo de clases CSS de un CONTENEDOR no llega al marcado, solo el de los
   widgets. El que cede sitio es el menú, que es justo el que sabe plegarse en
   hamburguesa.

   Solo de 768px hacia arriba. En móvil manda el apaño de Elementor y estas
   reservas de ancho sacarían el botón fuera de la pantalla. */
@media(min-width:768px){
  .site-header .e-con:has(> .ce-logo-widget),
  .site-header .e-con:has(> .ce-logo-marca),
  .site-header .e-con:has(> .elementor-widget-button){--width:auto;flex-shrink:0}
  .site-header .elementor-widget-button .elementor-button{white-space:nowrap}
}

/* Tramo justo: el menú desplegado cabe de sobra a partir de ~1560px, y por
   debajo de 1440px ya está plegado en hamburguesa. Entre esas dos cifras falta
   medio centenar de píxeles, y se saca apretando el espaciado del menú en vez
   de encoger la marca o el botón. */
@media(min-width:1441px) and (max-width:1560px){
  .site-header .ce-nav .elementor-nav-menu--main .elementor-item{
    padding-inline:10px}
}

/* En móvil la cabecera ya va justa —los dos símbolos, el desplegable y el
   botón—, así que el logotipo grande de CEIPS se retira: su sitio lo ocupa el
   emblema que va incrustado en la imagen de la marca (ver «Móvil: los dos
   símbolos», más abajo). Se oculta la columna entera, no solo la imagen: si
   no, el hueco y el gap de 20px seguirían ocupando sitio. */
@media(max-width:767px){
  .site-header .e-con:has(> .ce-logo-marca){display:none}
}

/* Entre 767 y 1440 NO se encoge: con el menú ya plegado en hamburguesa sobra
   sitio (marca 322px + desplegable ~40px + botón 214px caben desde ~700px), y
   dejarla encoger solo conseguía que se viera pequeña sin motivo. */

/* Móvil: los dos símbolos, el cuadrado verde y el emblema de CEIPS.

   Aquí no cabe la marca entera ni el logotipo de CEIPS por separado, así que
   se sirve «assets/ceips-simbolos.png», una pieza con los dos emblemas juntos
   que entregó el cliente. Se sustituye la imagen con «content:url()», que pisa
   también el srcset: es la única forma de cambiar el fichero de un <img> desde
   la hoja de estilos. El <img> real se conserva, y con él su alt.

   La caja es de 64×32 porque la parte con dibujo del fichero mide 356×178, es
   decir 2:1 clavado; el resto del lienzo va vacío hasta los 2048px y queda
   fuera por el recorte. Si algún día se rehace esa imagen y cambia la
   proporción de la zona con contenido, hay que ajustar aquí el ancho. */
@media(max-width:767px){
  .site-header .ce-logo-widget img{
    content:url(ceips-simbolos.png);
    width:64px;height:32px;max-width:none;max-height:none;
    object-fit:cover;object-position:left center}
}