/* OCCHE · dirección visual B "Granate pleno". Un solo CSS, sin JS, CSP default-src 'self'. */

/* ---------- Fuentes autoalojadas (subseteadas con fontTools) ---------- */
@font-face{font-family:"Carlito";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/carlito-regular.woff2") format("woff2")}
@font-face{font-family:"Carlito";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/carlito-bold.woff2") format("woff2")}
@font-face{font-family:"Carlito";font-style:italic;font-weight:400;font-display:swap;src:url("/static/fonts/carlito-italic.woff2") format("woff2")}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/noto-sans-sc-400.woff2") format("woff2");unicode-range:U+3000-303F,U+4E00-9FFF}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:700;font-display:swap;src:url("/static/fonts/noto-sans-sc-700.woff2") format("woff2");unicode-range:U+3000-303F,U+4E00-9FFF}

/* ---------- Tokens ---------- */
:root{
  --g:#9F1216;        /* granate */
  --g2:#6E0C0F;       /* granate oscuro */
  --au:#BA9E4B;       /* dorado: sobre granate solo >= 24 px o decorativo */
  --au2:#D4BF77;      /* dorado claro: hover de .btn (tinta encima, AA) */
  --rosa:#F8E8E8;     /* rojo muy pálido: fondo de hover (granate o tinta encima, AA) */
  --ink:#1F1A17;      /* tinta */
  --gris:#F3F1EC;     /* gris claro */
  --w:#fff;
  --ink2:#4A423D;     /* texto secundario sobre claro (AA) */
  --line:rgba(31,26,23,.18);
  --wline:rgba(255,255,255,.25);
  --lat:"Carlito","Calibri",system-ui,sans-serif;
  --cn:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;
  --wrap:1240px;
  --gut:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--lat);color:var(--ink);background:var(--w);line-height:1.5;font-size:18px;-webkit-font-smoothing:antialiased;overflow-x:clip}
.cn{font-family:var(--cn)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
svg{display:block}
h1,h2,h3{line-height:1.08;font-weight:700;letter-spacing:-.01em;text-wrap:pretty}
h2{font-size:clamp(30px,3.6vw,50px)}
h3{font-size:24px}
p,li{text-wrap:pretty}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,label:focus-visible{outline:3px solid var(--au);outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto}
@media (max-width:480px){:root{--gut:16px}}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--au);color:var(--ink);padding:10px 16px;font-weight:700;text-decoration:none}
.skip:focus{left:8px}

/* ---------- Botones ---------- */
.btn{display:inline-block;background:var(--au);color:var(--ink);font-weight:700;padding:15px 28px;text-decoration:none;border:2px solid var(--au);font-size:16px;letter-spacing:.03em;text-transform:uppercase;transition:background .2s,color .2s;cursor:pointer;font-family:inherit;line-height:1.2;text-align:center}
.btn:hover,.btn:focus-visible{background:var(--au2);color:var(--ink);border-color:var(--au2)}
.btn.ghost{background:transparent;color:var(--w);border-color:var(--w)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--rosa);color:var(--g);border-color:var(--rosa)}
.btn.ink{background:var(--g);color:var(--w);border-color:var(--g)}
.btn.ink:hover,.btn.ink:focus-visible{background:var(--rosa);color:var(--g);border-color:var(--g)}
.btn.big{font-size:19px;padding:20px 40px}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- Celosía 窗花 ---------- */
.celosia{position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='white' stroke-width='1.2'><rect x='10' y='10' width='100' height='100'/><rect x='30' y='30' width='60' height='60'/><path d='M60 10v20M60 90v20M10 60h20M90 60h20M30 30l-20-20M90 30l20-20M30 90l-20 20M90 90l20 20'/><circle cx='60' cy='60' r='12'/></svg>");background-size:120px 120px}
.celosia.au{opacity:.12;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%23BA9E4B' stroke-width='1.4'><rect x='10' y='10' width='100' height='100'/><rect x='30' y='30' width='60' height='60'/><path d='M60 10v20M60 90v20M10 60h20M90 60h20M30 30l-20-20M90 30l20-20M30 90l-20 20M90 90l20 20'/><circle cx='60' cy='60' r='12'/></svg>")}

/* ---------- Cabecera ---------- */
.top{background:var(--g);color:var(--w);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.14)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px;position:relative}
.brand{display:block;width:220px;flex:none}
.brand svg{width:100%;height:auto}
.nav{display:flex;align-items:center;gap:6px}
.menu{display:flex;list-style:none;gap:2px}
.menu>li{position:relative}
.nav a{display:block;padding:12px 13px;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.menu>li>a{position:relative}
.menu>li>a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;background:var(--au);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.menu>li>a:hover::after,.menu>li:focus-within>a::after,.menu>li>a[aria-current]::after{transform:scaleX(1)}
.has-sub>a{padding-right:28px}
.has-sub>a::before{content:"";position:absolute;right:11px;top:50%;width:7px;height:7px;border-right:2px solid var(--au);border-bottom:2px solid var(--au);transform:translateY(-70%) rotate(45deg)}
.submenu{position:absolute;left:0;top:100%;background:var(--w);color:var(--ink);list-style:none;min-width:300px;padding:8px 0;box-shadow:0 18px 40px rgba(31,26,23,.25);display:none;border-top:3px solid var(--au);z-index:60}
.has-sub:hover>.submenu,.has-sub:focus-within>.submenu{display:block}
.submenu a{text-transform:none;letter-spacing:0;font-weight:400;font-size:16px;padding:9px 20px;white-space:normal}
.submenu a:hover,.submenu a:focus,.submenu a[aria-current]{background:var(--rosa);color:var(--g)}
.lang{display:flex;gap:2px;list-style:none;margin-left:12px;padding-left:12px;border-left:1px solid rgba(255,255,255,.3)}
.lang a{padding:8px 8px;font-size:14px;position:relative}
.lang a:hover,.lang a:focus-visible{background:var(--rosa);color:var(--g)}
.lang a[aria-current]::after{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:2px;background:var(--au)}
.nav-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.burger{display:none;background:none;border:2px solid var(--w);color:var(--w);padding:10px 14px;font:inherit;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.burger-close{display:none}
@media (max-width:1120px){
  .burger{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--g2);flex-direction:column;align-items:stretch;padding:12px 0 24px;max-height:calc(100vh - 84px);overflow:auto;box-shadow:0 20px 40px rgba(0,0,0,.3)}
  .nav-toggle:checked~.nav{display:flex}
  .nav-toggle:checked~.burger .burger-open{display:none}
  .nav-toggle:checked~.burger .burger-close{display:inline}
  .nav-toggle:focus-visible~.burger{outline:3px solid var(--au);outline-offset:3px}
  .menu{flex-direction:column}
  .nav a{white-space:normal}
  .menu>li>a::after{display:none}
  .has-sub>a::before{display:none}
  .submenu{position:static;display:block;background:transparent;color:var(--w);box-shadow:none;border:0;padding:0 0 8px 18px;min-width:0}
  .submenu a:hover,.submenu a:focus,.submenu a[aria-current]{background:transparent;color:var(--au);text-decoration:underline}
  .lang{border:0;margin:10px 14px 0;padding:0}
}
@media (max-width:480px){.brand{width:170px}.top .wrap{min-height:72px}}

/* ---------- Hero portada ---------- */
.hero{position:relative;background:linear-gradient(135deg,var(--g) 0%,var(--g) 45%,var(--g2) 100%);color:var(--w);overflow:hidden;padding:clamp(56px,8vw,110px) 0 clamp(48px,6vw,90px)}
.hero .bg{position:absolute;right:-2vw;bottom:-.1em;font-weight:700;font-size:clamp(120px,22vw,340px);line-height:1;color:rgba(255,255,255,.06);white-space:nowrap;pointer-events:none;letter-spacing:.02em;user-select:none}
.herogrid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,3vw,48px);align-items:center}
@media (min-width:1300px){.herogrid{grid-template-columns:minmax(0,790px) minmax(0,1fr)}}
.hero .line{width:120px;height:5px;background:var(--au);margin-bottom:30px}
.hero h1{font-size:clamp(32px,3.82vw,55px);line-height:1.05}
.hero h1:lang(ca){font-size:clamp(32px,3.68vw,53px)}
.hero h1 .l1,.hero h1 .l2{display:block}
.hero h1 .l2{margin-top:.18em;color:var(--au)}
.hero .sub{color:var(--w);font-size:clamp(24px,2.2vw,30px);font-weight:400;margin:26px 0 38px;line-height:1.3}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap}
.heroart{position:relative}
.heroart .china{width:112%;max-width:none;height:auto;max-height:72vh;overflow:visible}
@media (min-width:901px) and (max-width:1299px){.heroart .china{width:100%}}
@media (max-width:900px){
  .herogrid{grid-template-columns:1fr}
  .heroart{max-width:460px;margin:8px auto 0}
  .heroart .china{width:100%;max-height:none}
}

/* SVG firma: silueta de China, pin sobre QINGDAO, 5 iconos */
.china .map{fill:var(--g2);fill-opacity:1;stroke:var(--au);stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.china .pin path{fill:var(--au)}
.china .pin circle{fill:var(--g)}
.china .pin-shadow{fill:rgba(0,0,0,.35)}
.china .ln{stroke:var(--au);stroke-width:1.2;stroke-dasharray:6 6;opacity:.55}
.china .ic{transform-box:fill-box;transform-origin:center}
.china .ic circle{fill:var(--g2);stroke:var(--au);stroke-width:2}
.china .ic path{stroke:var(--w);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.china .ic text{fill:var(--w);font-family:var(--lat);font-size:34px;font-weight:700;letter-spacing:.02em}

/* Secuencia (decisión de Joan 29/10/2026):
   0 s      línea 1 del H1 + la silueta empieza a dibujarse (0-1,2 s); el pin cae al terminar (1,2-1,6 s)
   3,1 s    línea 2 del H1 (1,5 s después de que silueta y pin estén completos)
   3,7 s    los 5 iconos en cascada rápida, justo al acabar la línea 2 (último icono termina a 5,1 s)
   6,1 s    subtítulo dorado (1 s después del último icono)
   7,6 s    los dos botones flotan hacia arriba (1 s después del subtítulo) */
@media (prefers-reduced-motion:no-preference){
  .hero .line{animation:wipe .6s var(--ease) both}
  .hero .l1{animation:lineIn .6s var(--ease) both}
  .china .map{animation:draw 1.2s ease-in-out both,fillIn .5s ease-out .8s both}
  .china .pin{animation:drop .4s cubic-bezier(.3,.6,.4,1) 1.2s both}
  .china .pin-shadow{animation:fadeIn .25s ease-out 1.45s both}
  .hero .l2{animation:lineIn .6s var(--ease) 3.1s both}
  .china .ic1{animation:pop .3s var(--ease) 3.7s both}
  .china .ic2{animation:pop .3s var(--ease) 3.975s both}
  .china .ic3{animation:pop .3s var(--ease) 4.25s both}
  .china .ic4{animation:pop .3s var(--ease) 4.525s both}
  .china .ic5{animation:pop .3s var(--ease) 4.8s both}
  .china .ln1{animation:lnIn .3s ease-out 3.7s both}
  .china .ln2{animation:lnIn .3s ease-out 3.975s both}
  .china .ln3{animation:lnIn .3s ease-out 4.25s both}
  .china .ln4{animation:lnIn .3s ease-out 4.525s both}
  .china .ln5{animation:lnIn .3s ease-out 4.8s both}
  .hero .sub{animation:fadeIn .5s ease-out 6.1s both}
  .hero .cta{animation:floatUp .6s var(--ease) 7.6s both}
}
@keyframes lineIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes floatUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes wipe{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fillIn{from{fill-opacity:0}to{fill-opacity:1}}
@keyframes drop{0%{opacity:0;transform:translateY(-170px)}55%{opacity:1;transform:translateY(0)}75%{transform:translateY(-16px)}100%{transform:translateY(0)}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes lnIn{from{opacity:0}to{opacity:.55}}

/* ---------- Banda 中西商务办公室 · BARCELONA · QINGDAO ---------- */
.bandline{background:var(--g2);color:var(--w);font-size:clamp(16px,1.6vw,22px);letter-spacing:.3em;text-transform:uppercase;padding:16px 0;text-align:center;border-top:1px solid var(--wline)}
.bandline .wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Bandas ---------- */
.band{padding:clamp(60px,7vw,110px) 0;position:relative}
.band.g{background:var(--g);color:var(--w)}
.band.gris{background:var(--gris)}
.band.w{background:var(--w)}
.band.g p{color:rgba(255,255,255,.9)}
.rule{width:84px;height:4px;background:var(--au);margin-bottom:26px}
.lead{font-size:clamp(19px,1.5vw,22px);margin-top:22px}
.rich{margin-top:22px}
.rich p,.rich ul,.rich ol{margin-bottom:1em}
.rich ul,.rich ol{padding-left:1.3em}
.rich li{margin-bottom:.35em}
.rich a{color:var(--g);font-weight:700}
.rich a:hover,.rich a:focus-visible{background:var(--rosa)}
.band.g .rich a{color:var(--w);text-decoration-color:var(--au)}
.band.g .rich a:hover,.band.g .rich a:focus-visible{background:transparent;color:var(--au)}
.rich>:last-child{margin-bottom:0}
.rich h3{margin:1.2em 0 .5em}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,96px);align-items:center;position:relative}
.split.start{align-items:start}
.split.rev{grid-template-columns:.95fr 1.05fr}
@media (max-width:860px){.split,.split.rev{grid-template-columns:1fr}.split.rev>.duo{order:2}}
.prose{max-width:960px;position:relative}
.duo{position:relative;background:var(--g);overflow:hidden;aspect-ratio:4/3}
.duo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.95);mix-blend-mode:screen;opacity:.92}
.duo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 55%,rgba(110,12,15,.55))}
.duo.frame{outline:4px solid var(--au);outline-offset:-18px}
.duo.small{aspect-ratio:3/2}
/* Fotos con su proporción real (sin recortar cabezas) y pie de foto */
.duo.auto{aspect-ratio:auto}
.duo.auto img{height:auto}
.pics{display:grid;gap:26px}
.pic{margin:0}
.pic figcaption{margin-top:10px;font-size:15px;color:var(--ink2);letter-spacing:.02em}
.pic figcaption time{font-weight:700;color:var(--g)}

/* Texto que entra desde la línea dorada al hacer scroll (solo navegadores con animation-timeline; si no, estático) */
.rv{position:relative}
.rv.pad{padding-top:22px}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .rv::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--au);transform-origin:left;animation:wipe linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(42px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}

/* ---------- Instituciones (sin cifras) ---------- */
.inst{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px;border-top:1px solid var(--wline);padding-top:40px}
.inst li{border-left:3px solid var(--au);padding-left:22px}
.inst .ihead{display:flex;align-items:center;gap:20px;min-height:96px}
.inst .ilogo{flex:none;display:grid;place-items:center}
.inst img{height:92px;width:auto;max-width:120px;object-fit:contain}
.inst img.logo-qingdao-fao{height:58px;max-width:150px}
.inst h3{font-size:29px;line-height:1.1;margin:0 0 6px;text-transform:uppercase;letter-spacing:.04em}
.inst .instname{font-size:17px;line-height:1.3;color:rgba(255,255,255,.8);margin:0}
.inst p{margin-top:20px;font-size:18px;line-height:1.5;color:rgba(255,255,255,.9)}
@media (max-width:1100px){.inst{grid-template-columns:1fr;gap:34px}}

/* ---------- Rejilla de servicios ---------- */
.grid8{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:48px}
.sv a{display:flex;flex-direction:column;height:100%;min-height:320px;padding:30px 26px 26px;text-decoration:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--w);transition:background .25s,color .25s;position:relative}
.sv .n{font-size:54px;font-weight:700;color:var(--au);line-height:1;letter-spacing:-.03em}
.sv h3{font-size:24px;margin:22px 0 12px}
.sv p{font-size:16px;line-height:1.5;color:var(--ink2);flex:1}
.sv .go{margin-top:22px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--g)}
.sv h3{transition:color .25s}
.sv a:hover,.sv a:focus-visible{background:var(--rosa)}
.sv a:hover h3,.sv a:focus-visible h3{color:var(--g)}
.sv a:hover .go,.sv a:focus-visible .go{text-decoration:underline;text-decoration-color:var(--au)}
@media (max-width:1000px){.grid8{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid8{grid-template-columns:1fr}.sv a{min-height:0}}

/* ---------- Proyectos por sector ---------- */
.sect{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:48px;background:rgba(255,255,255,.18)}
.sect li a{display:block;background:var(--g);padding:34px 30px;text-decoration:none;min-height:230px;transition:background .25s;height:100%}
.sect li a:hover,.sect li a:focus-visible{background:var(--au)}
.sect h3{font-size:30px;color:var(--au);margin-bottom:12px;transition:color .25s}
.sect p{font-size:16px;color:rgba(255,255,255,.88);transition:color .25s}
.sect li a:hover h3,.sect li a:focus-visible h3,.sect li a:hover p,.sect li a:focus-visible p{color:var(--ink)}
@media (max-width:860px){.sect{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sect{grid-template-columns:1fr}}

/* ---------- Trayectoria ---------- */
.tl{list-style:none;margin-top:30px;border-left:3px solid var(--au)}
.tl li{padding:0 0 26px 26px;position:relative}
.tl li::before{content:"";position:absolute;left:-9px;top:8px;width:15px;height:15px;background:var(--g);border:3px solid var(--au)}
.tl time{display:block;font-weight:700;color:var(--g);text-transform:uppercase;letter-spacing:.08em;font-size:15px;margin-bottom:4px}

/* ---------- Formulario ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-top:34px;position:relative}
.form label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.06em;max-width:none}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;font-size:18px;padding:14px 16px;border:2px solid rgba(31,26,23,.3);background:var(--w);color:var(--ink);text-transform:none;letter-spacing:0;font-weight:400;border-radius:0;width:100%}
.form textarea{min-height:150px;resize:vertical}
.form .chk{flex-direction:row;align-items:flex-start;gap:12px;text-transform:none;letter-spacing:0;font-weight:400;font-size:15px}
.form .chk input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--g)}
.form .chk a{color:var(--g);font-weight:700}
.form .chk a:hover,.form .chk a:focus-visible{background:var(--rosa)}
.form .captcha{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 20px}
.form .captcha img{width:180px;height:60px;flex:none;border:2px solid rgba(31,26,23,.3);background:var(--w);margin-top:31px}
.form .cpfield{flex:1 1 260px;display:flex;flex-direction:column;gap:8px}
.form .captcha input{max-width:260px;letter-spacing:.25em;text-transform:uppercase;font-weight:700}
.form .captcha a{align-self:flex-start;font-size:15px;font-weight:700;color:var(--g);padding:2px 6px;margin-left:-6px}
.form .captcha a:hover,.form .captcha a:focus-visible{background:var(--rosa)}
@media (max-width:620px){.form .captcha img{margin-top:0}}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media (max-width:620px){.form{grid-template-columns:1fr}}

.formnote{font-size:15px;color:var(--ink2);margin-top:4px}
.titular{font-style:normal;border-left:4px solid var(--au);padding:18px 24px;background:var(--gris);margin-bottom:34px;line-height:1.6}
.legalgrid{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.toc{position:sticky;top:104px;border-left:3px solid var(--au);padding-left:18px}
.toc h2{font-size:14px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px}
.toc ol{list-style:none}
.toc a{display:block;padding:6px 8px;margin-left:-8px;text-decoration:none;font-size:16px;line-height:1.3;color:var(--ink2)}
.toc a:hover,.toc a:focus-visible{background:var(--rosa);color:var(--g)}
.legaltext{font-size:19px}
.legaltext h2{font-size:clamp(24px,2.4vw,32px);margin-top:44px;scroll-margin-top:110px}
.legaltext h2:first-of-type{margin-top:0}
.legaltext .rich{margin-top:14px}
@media (max-width:860px){.legalgrid{grid-template-columns:1fr}.toc{position:static}}
/* ---------- Cabecera de página interior ---------- */
.phead{position:relative;background:linear-gradient(135deg,var(--g) 0%,var(--g) 45%,var(--g2) 100%);color:var(--w);overflow:hidden;padding:clamp(40px,5vw,72px) 0 clamp(48px,6vw,84px)}
.phead.tall{padding:clamp(80px,12vw,160px) 0}
.phead .wrap{position:relative}
.phead .line{width:84px;height:4px;background:var(--au);margin:26px 0 24px}
.phead h1{font-size:clamp(32px,4vw,56px)}
.phead .sub{font-size:clamp(19px,1.6vw,23px);margin-top:22px;color:rgba(255,255,255,.92)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:15px;color:rgba(255,255,255,.85)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--au);font-weight:700}
.crumbs a{text-decoration:none;padding:2px 6px;margin:-2px -6px}
.crumbs a:hover,.crumbs a:focus-visible{background:var(--rosa);color:var(--g)}
.crumbs [aria-current]{font-weight:700;color:var(--w)}
.sec .duo{margin-top:0}
.aside{margin-top:30px}

/* ---------- FAQ (details nativos) ---------- */
.faqgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(28px,5vw,80px);align-items:start}
.faqgrid h2{font-size:clamp(30px,3vw,42px)}
.faqgrid>.rv{position:sticky;top:104px}
.faq details{border-top:1px solid var(--wline)}
.faq details:last-child{border-bottom:1px solid var(--wline)}
.faq summary{cursor:pointer;font-size:22px;font-weight:700;padding:20px 48px 20px 0;list-style:none;position:relative;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:2px solid var(--au);color:var(--au);display:grid;place-items:center;font-size:26px;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover,.faq summary:focus-visible{color:var(--au)}
@media (max-width:860px){.faqgrid{grid-template-columns:1fr}.faqgrid>.rv{position:static}}
.faq details .rich{margin:0 0 22px}
.faq .rv{margin-bottom:24px}

/* ---------- Cierre de página (opción 1): banda clara con celosía dorada, frase centrada y un solo botón ---------- */
.ctab{text-align:center;border-top:1px solid var(--line)}
.ctawrap{position:relative;display:grid;justify-items:center;gap:30px}
.ctatext{font-size:clamp(26px,2.8vw,38px);font-weight:700;line-height:1.15;max-width:none}

/* Opción 2 (demo en /servicios/legal/; cta.popup: true en el JSON o POPUP_ALL en build.py): barra fija inferior sin JS.
   El centinela .fin (antes del FAQ) publica la view-timeline --fin, con alcance en body; la barra entra deslizándose
   cuando el centinela asoma por abajo y queda fija. Es sticky dentro de <main> (altura 0), así se detiene al llegar al pie.
   Sin animation-timeline no se muestra (display:none). La casilla #popclose la cierra. */
body.has-popup{timeline-scope:--fin}
.fin{height:1px;margin-top:-1px;view-timeline-name:--fin;view-timeline-axis:block}
.popclose-in{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.popwrap{position:sticky;bottom:0;height:0;z-index:40;display:none}
.popbar{position:absolute;left:0;right:0;bottom:0;background:var(--g);color:var(--w);box-shadow:0 -12px 32px rgba(31,26,23,.28);border-top:3px solid var(--au);transform:translateY(110%)}
.poprow{display:flex;align-items:center;gap:18px 26px;padding:14px 56px 14px 0;flex-wrap:wrap;position:relative}
.poprow p{flex:1 1 320px;font-size:clamp(17px,1.4vw,21px);font-weight:700;line-height:1.25;margin:0}
.poprow .btn{padding:12px 22px;font-size:15px}
.popx{position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;font-size:30px;line-height:1;cursor:pointer;border:2px solid rgba(255,255,255,.55);color:var(--w)}
.popx:hover{background:var(--rosa);color:var(--g);border-color:var(--rosa)}
.popclose-in:focus-visible~.popwrap .popx{outline:3px solid var(--au);outline-offset:3px}
.popclose-in:checked~.popwrap{display:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .popwrap{display:block}
    .popbar{animation:popIn linear both;animation-timeline:--fin;animation-range:cover 0% cover 30%}
  }
}
@keyframes popIn{from{transform:translateY(110%)}to{transform:none}}
@media (max-width:640px){.poprow{padding-right:48px}.poprow .btn{width:100%}}

/* ---------- Archivo de prensa ---------- */
.press{list-style:none;margin-top:40px;display:grid;gap:40px}
.pressitem{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:28px;align-items:start;padding-bottom:40px;border-bottom:1px solid var(--line)}
.pressitem:last-child{border-bottom:0}
.pressitem time{display:block;font-weight:700;color:var(--g);text-transform:uppercase;letter-spacing:.08em;font-size:15px;margin-bottom:8px}
.pressitem h3{font-size:26px}
.pressitem .rich{margin-top:12px}
@media (max-width:700px){.pressitem{grid-template-columns:1fr}}

/* ---------- Vídeos: rejilla de 2 columnas, título encima y reproductor YOUTUBE 16:9 debajo ---------- */
.vgrid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,56px) clamp(20px,2.5vw,32px)}
.vgrid h2{font-size:clamp(22px,2vw,28px);line-height:1.2;margin-bottom:14px}
.vframe{position:relative;width:100%;aspect-ratio:16/9;background:var(--g2);outline:4px solid var(--au);outline-offset:-4px}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vgrid p{margin-top:14px;font-size:16px;color:var(--ink2)}
.vgrid .vnote{margin:-6px 0 12px;font-size:14px;color:var(--g);font-weight:700;letter-spacing:.02em}
.vthumb{aspect-ratio:16/9;display:grid;place-items:center}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vthumb .vplay{position:relative;z-index:1}
@media (max-width:1000px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.vgrid{grid-template-columns:1fr}}

/* ---------- Pie full-bleed granate ---------- */
.foot{background:var(--g);color:var(--w);padding:56px 0 32px;position:relative;overflow:hidden;border-top:6px solid var(--au)}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.7)}
.foot .wrap{position:relative}
.fg{display:grid;grid-template-columns:1.1fr 1.6fr .8fr 1.5fr;gap:40px 36px;align-items:start}
.foot .brand{width:220px}
.fbrand{width:220px;text-align:center}
.fbrand .brand{display:block;margin:0 auto}
.fcity{margin-top:14px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.85);line-height:1.8}
.fcity span{display:block}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.foot .fcols li a{font-size:15px;padding:5px 8px;line-height:1.3}
.foot li.sub a{padding-left:22px;position:relative}
.foot li.sub a::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:1px;background:var(--au)}
.foot .flang a{display:inline-flex;align-items:center;gap:10px}
.flag{width:20px;height:14px;flex:none;outline:1px solid rgba(255,255,255,.4)}
.fsub p{font-size:15px;line-height:1.45;color:rgba(255,255,255,.9);margin-bottom:14px}
.subform{display:grid;gap:12px;position:relative}
.subrow{display:flex}
.subrow input{flex:1 1 150px;min-width:0;font:inherit;font-size:16px;padding:12px 14px;border:0;background:var(--w);color:var(--ink);border-radius:0}
.subrow input::placeholder{color:var(--ink2)}
.subrow .btn{padding:12px 18px;font-size:14px;flex:none}
.subchk{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;color:rgba(255,255,255,.88);cursor:pointer}
.subchk input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--au)}
.subchk a{color:var(--w);font-weight:700;text-decoration-color:var(--au)}
.subchk a:hover,.subchk a:focus-visible{color:var(--au)}
.foot h2{font-size:14px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;font-weight:700;padding-bottom:8px;border-bottom:2px solid var(--au);display:inline-block}
.foot ul{list-style:none}
.foot li a{display:inline-block;padding:7px 8px;margin-left:-8px;text-decoration:none;font-size:17px}
.foot li a:hover,.foot li a:focus-visible{background:var(--rosa);color:var(--g)}
.fband{margin-top:22px;font-size:17px;letter-spacing:.22em;color:rgba(255,255,255,.9);max-width:none}
.flang{display:block;margin:0;padding:0;border:0}
.flang a{padding:7px 8px;margin-left:-8px;font-size:17px;text-transform:none;letter-spacing:0;font-weight:400}
.flang a[aria-current]{font-weight:700}
.flang a[aria-current]::after{left:8px;right:auto;width:28px;bottom:2px}
.fb{margin-top:48px;padding-top:22px;border-top:1px solid var(--wline);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.85)}
.fb .cn{font-size:18px;letter-spacing:.2em}
@media (max-width:1100px){.fg{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.fg{grid-template-columns:1fr;gap:34px}.fcols{grid-template-columns:1fr}}

/* ---------- Impresión / captura: nada animado ni oculto ---------- */
@media print{*{animation:none!important;opacity:1!important;transform:none!important}}

/* ---------- Movimiento reducido: todo estático y ya dibujado ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- motion.css: movimiento e ilustraciones de las páginas interiores (se concatena tras site.css en el build) ----------
   Solo CSS. Solo se animan transform, opacity, stroke-dashoffset y fill-opacity. Los atributos base de cada SVG SON el estado
   final: con prefers-reduced-motion: reduce (y en impresión) no hay animación y todo aparece dibujado. */

/* ---------- Cabecera interior con ilustración (.phead.ph) ---------- */
.phgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.phead.ph h1{max-width:none;font-size:clamp(30px,3.5vw,50px)}
.phead.ph .sub{max-width:none}
.phead.ph .phtext>.btns{margin-top:30px}
.pha{width:100%;height:auto;overflow:visible}
.pha text,.il text{pointer-events:none}
@media (max-width:860px){
  .phgrid{grid-template-columns:1fr}
  .phart{max-width:300px;margin:28px auto 0}
  .phead.tall .phart{max-width:240px}
}
@media (min-width:861px) and (max-width:1100px){.phgrid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}

/* ---------- Discos de icono en tarjetas (.ib) ---------- */
.ib{display:block;flex:none}
.grid8.gi .ib{width:72px;height:72px;margin-bottom:6px}
.grid8.gi .sv .n{position:absolute;right:22px;top:24px;font-size:34px;opacity:.85}
.grid8.gi .sv h3{margin-top:18px}

/* ---------- Secciones con ilustración (.secm) ---------- */
.secm .split{align-items:center}
.secm .rich p,.secm .rich li,.secm .lead{max-width:none}
.secm .ilw{margin:0;position:relative}
.secm .ilw .il,.secm .ilw .ils{width:100%;height:auto;display:block}
.secm .ilw .ils{aspect-ratio:4/3}
.secm .st{position:relative;padding-top:22px}
@media (max-width:860px){.secm .split.rev>.ilw{order:2}.secm .ilw{max-width:520px}}

/* ---------- Fotogramas ---------- */
@keyframes ilDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ilFill{from{fill-opacity:0}to{fill-opacity:1}}
@keyframes ilFade{from{opacity:0}to{opacity:1}}
@keyframes phUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes mFloat{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes mLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes mRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

/* Estado base de los trazos (= final): cada path lleva pathLength="1" */
.pha .d,.il .d{stroke-dasharray:1;stroke-dashoffset:0}

/* ---------- Cabecera: la ilustración se dibuja (0 a 1,2 s), el texto llega después ----------
   0,0 s  trazos s1 · 0,35 s s2 · 0,7 s s3 · 1,05 s s4 (cada uno 1,1 s de trazo, relleno a +0,7 s, textos a +0,9 s)
   1,5 s  migas + línea dorada + H1 (fade + subida)
   2,7 s  intro (1,2 s después)   ·   2,9 s  botones (gracias) */
@media (prefers-reduced-motion:no-preference){
  .pha .d{animation:ilDraw 1.1s ease-in-out both}
  .pha .f{animation:ilFill .5s ease-out .7s both}
  .pha .p{animation:ilFade .45s ease-out .9s both}
  .pha .d.f{animation:ilDraw 1.1s ease-in-out both,ilFill .5s ease-out .7s both}
  .pha .s2.d{animation-delay:.35s}.pha .s2.f{animation-delay:1.05s}.pha .s2.p{animation-delay:1.25s}.pha .s2.d.f{animation-delay:.35s,1.05s}
  .pha .s3.d{animation-delay:.7s}.pha .s3.f{animation-delay:1.4s}.pha .s3.p{animation-delay:1.6s}.pha .s3.d.f{animation-delay:.7s,1.4s}
  .pha .s4.d{animation-delay:1.05s}.pha .s4.f{animation-delay:1.75s}.pha .s4.p{animation-delay:1.95s}.pha .s4.d.f{animation-delay:1.05s,1.75s}
  .phead.ph .crumbs{animation:phUp .6s var(--ease) 1.5s both}
  .phead.ph .line{animation:wipe .6s var(--ease) 1.5s both}
  .phead.ph h1{animation:phUp .7s var(--ease) 1.6s both}
  .phead.ph .sub{animation:phUp .6s var(--ease) 2.7s both}
  .phead.ph .phtext>.btns{animation:phUp .6s var(--ease) 2.9s both}
}

/* ---------- Circuito de 5 fases (cabecera de contacto, .pha.cc) ----------
   0 s camino completo punteado tenue (.c0) · 0,2 s nodo 1 (sus 3 líneas se rellenan de 0,6 a 1,4 s) · 1,4 s nodo 2 (tarjeta
   Agenda sale del sobre a 1,9 s) · 2,6 s nodo 3 (día marcado a 3,4 s) · 3,8 s nodo 4 (ondas 4,2/4,4/4,6 s) · 5 s nodo 5
   (sello 5,3 a 6,2 s). Cada tramo sólido (.g1..g4) arranca 0,5 s después de su nodo y llega al siguiente justo cuando se
   enciende. Convive con la secuencia de textos de la cabecera (H1 1,5 s · intro 2,7 s). Detalles por nodo: .x0 +0,3 s ·
   .x1 +0,4 s · .x2 +0,6 s · .x3 +0,8 s. En la versión de sección (.il.cc) mandan las clases s1..s4 del bloque de scroll. */
@keyframes ccSlide{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .pha.cc .n1{--t:.2s}.pha.cc .n2{--t:1.4s}.pha.cc .n3{--t:2.6s}.pha.cc .n4{--t:3.8s}.pha.cc .n5{--t:5s}
  .pha.cc .d{animation-duration:.7s}.pha.cc .f,.pha.cc .p{animation-duration:.4s}
  .pha.cc .p.c0{animation-delay:0s;animation-duration:.6s}
  .pha.cc .d.g1{animation-delay:.7s}.pha.cc .d.g2{animation-delay:1.9s}.pha.cc .d.g3{animation-delay:3.1s}.pha.cc .d.g4{animation-delay:4.3s}
  .pha.cc .n .d,.pha.cc .n .f{animation-delay:var(--t)}
  .pha.cc .n .ic{animation-delay:calc(var(--t) + .2s)}
  .pha.cc .n .p{animation-delay:calc(var(--t) + .45s)}
  .pha.cc .n .x0{animation-delay:calc(var(--t) + .3s)}
  .pha.cc .n .x1{animation-delay:calc(var(--t) + .4s)}
  .pha.cc .n .x2{animation-delay:calc(var(--t) + .6s)}
  .pha.cc .n .x3{animation-delay:calc(var(--t) + .8s)}
  .pha.cc .n .x1,.pha.cc .n .x2,.pha.cc .n .x3{animation-duration:.4s}
  .pha.cc .n .sl{animation:ccSlide .5s var(--ease) both;animation-delay:calc(var(--t) + .5s)}
}
@media (max-width:860px){.phart.cc{width:100%;max-width:340px}.pha.cc .lb{font-size:28px}}

/* ---------- Scroll: bloques que entran flotando (.fl), desde la izquierda (.sl) o desde la derecha (.sr);
   hijos de .st escalonados; ilustraciones inline (.il) que se trazan al entrar. Rango corto (termina al 45 % de la
   entrada) para que nunca se vea un hueco. Solo navegadores con animation-timeline; el resto, estático. ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fl,.sl,.sr{animation:mFloat linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .sl{animation-name:mLeft}
    .sr{animation-name:mRight}
    .st>*{animation:mFloat linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .st>*:nth-child(2){animation-range:entry 6% entry 46%}
    .st>*:nth-child(3){animation-range:entry 12% entry 52%}
    .st>*:nth-child(n+4){animation-range:entry 18% entry 58%}
    .grid8.gi>li,.sect.gi>li{animation:mFloat linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .grid8.gi>li:nth-child(4n+2),.sect.gi>li:nth-child(3n+2){animation-range:entry 7% entry 47%}
    .grid8.gi>li:nth-child(4n+3),.sect.gi>li:nth-child(3n){animation-range:entry 14% entry 54%}
    .grid8.gi>li:nth-child(4n){animation-range:entry 21% entry 61%}
    .il{view-timeline:--il block}
    .il .d{animation:ilDraw linear both;animation-timeline:--il;animation-range:entry 0% entry 45%}
    .il .f{animation:ilFill linear both;animation-timeline:--il;animation-range:entry 12% entry 50%}
    .il .p{animation:ilFade linear both;animation-timeline:--il;animation-range:entry 22% entry 55%}
    .il .d.f{animation:ilDraw linear both,ilFill linear both;animation-timeline:--il,--il;animation-range:entry 0% entry 45%,entry 12% entry 50%}
    .il .s2.d{animation-range:entry 8% entry 53%}.il .s2.f{animation-range:entry 20% entry 58%}.il .s2.p{animation-range:entry 30% entry 63%}
    .il .s3.d{animation-range:entry 16% entry 61%}.il .s3.f{animation-range:entry 28% entry 66%}.il .s3.p{animation-range:entry 38% entry 71%}
    .il .s4.d{animation-range:entry 24% entry 69%}.il .s4.f{animation-range:entry 36% entry 74%}.il .s4.p{animation-range:entry 46% entry 79%}
    .il .s2.d.f{animation-range:entry 8% entry 53%,entry 20% entry 58%}
    .il .s3.d.f{animation-range:entry 16% entry 61%,entry 28% entry 66%}
  }
}

/* ---------- Carrusel de fotos originales (.carr, páginas de Proyectos, ronda 3) ----------
   Solo CSS: cada foto se funde 0,8 s y queda 3,2 s (4 s por foto). La primera va en flujo (fija la altura del marco);
   el resto, absolutas. Puntos indicadores sincronizados con la misma animación. nN = número de fotos, iN = orden. */
.carr{aspect-ratio:auto}
.carr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.carr img.i0{position:relative;height:auto;opacity:.92}
.carr .cdots{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center;gap:9px;z-index:2;margin:0}
.carr .cdots i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);position:relative}
.carr .cdots i::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--au);opacity:0}
.carr .cdots i.i0::after{opacity:1}
@keyframes carr2{0%{opacity:0}10%{opacity:.92}50%{opacity:.92}60%{opacity:0}100%{opacity:0}}
@keyframes carr3{0%{opacity:0}6.7%{opacity:.92}33.3%{opacity:.92}40%{opacity:0}100%{opacity:0}}
@keyframes carr4{0%{opacity:0}5%{opacity:.92}25%{opacity:.92}30%{opacity:0}100%{opacity:0}}
@keyframes carr5{0%{opacity:0}4%{opacity:.92}20%{opacity:.92}24%{opacity:0}100%{opacity:0}}
@keyframes carr6{0%{opacity:0}3.3%{opacity:.92}16.7%{opacity:.92}20%{opacity:0}100%{opacity:0}}
@keyframes carr7{0%{opacity:0}2.9%{opacity:.92}14.3%{opacity:.92}17.1%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .carr img,.carr .cdots i::after{animation:carr4 16s linear infinite}
  .carr .cdots i.i0::after{opacity:0}
  .carr.n2 img,.carr.n2 .cdots i::after{animation-name:carr2;animation-duration:8s}
  .carr.n3 img,.carr.n3 .cdots i::after{animation-name:carr3;animation-duration:12s}
  .carr.n5 img,.carr.n5 .cdots i::after{animation-name:carr5;animation-duration:20s}
  .carr.n6 img,.carr.n6 .cdots i::after{animation-name:carr6;animation-duration:24s}
  .carr.n7 img,.carr.n7 .cdots i::after{animation-name:carr7;animation-duration:28s}
  .carr .i0,.carr .cdots i.i0::after{animation-delay:-.8s}
  .carr .i1,.carr .cdots i.i1::after{animation-delay:3.2s}
  .carr .i2,.carr .cdots i.i2::after{animation-delay:7.2s}
  .carr .i3,.carr .cdots i.i3::after{animation-delay:11.2s}
  .carr .i4,.carr .cdots i.i4::after{animation-delay:15.2s}
  .carr .i5,.carr .cdots i.i5::after{animation-delay:19.2s}
  .carr .i6,.carr .cdots i.i6::after{animation-delay:23.2s}
}
@media (prefers-reduced-motion:reduce){.carr img.i0{opacity:.92}}

/* ---------- Impresión y movimiento reducido: nada animado, todo dibujado ---------- */
@media print{.pha *,.il *,.fl,.sl,.sr,.st>*,.gi>li,.phead.ph .crumbs,.phead.ph .line,.phead.ph h1,.phead.ph .sub{animation:none!important}}
@media (prefers-reduced-motion:reduce){.pha *,.il *{animation:none!important;stroke-dashoffset:0;fill-opacity:1;opacity:1}}