/* =========================================================
   Arte & Publicidad — sistema visual
   Azul tomado del logotipo oficial (#0F4D95).
   Tipografías autoalojadas (licencia SIL OFL): Lora (titulares)
   y Carlito (texto).
   ========================================================= */

@font-face{font-family:"Lora";src:url("../fonts/Lora-Variable.woff") format("woff");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Carlito";src:url("../fonts/Carlito-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Carlito";src:url("../fonts/Carlito-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --azul:#0F4D95;        /* logotipo */
  --azul-hondo:#0A3366;  /* fondos oscuros, pie */
  --azul-claro:#DCE7F5;  /* fondos suaves */
  --tinta:#16202C;       /* texto */
  --gris:#5A6574;        /* texto secundario */
  --linea:#CBD4DF;       /* filetes */
  --papel:#FFFFFF;
  --amarillo:#FFD100;    /* amarillo de cuatricromía: solo foco y marcas */

  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Carlito","Calibri","Segoe UI",system-ui,-apple-system,sans-serif;

  /* escala tipográfica (1.25) */
  --t-0:1rem; --t-1:1.25rem; --t-2:1.5625rem; --t-3:1.953rem; --t-4:2.441rem; --t-5:3.052rem;

  --ancho:72rem;
  --medida:38rem;      /* longitud de línea del texto */
  --gutter:clamp(1rem,4vw,2.5rem);
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:1.125rem;line-height:1.55;font-kerning:normal;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px;box-shadow:0 0 0 5px var(--azul-hondo)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 var(--s2);text-wrap:balance}
h1{font-size:clamp(var(--t-3),5.2vw,var(--t-5))}
h2{font-size:clamp(var(--t-2),3.4vw,var(--t-4))}
h3{font-size:var(--t-1);font-weight:600}
p{margin:0 0 var(--s2);max-width:var(--medida)}
ul{padding-left:1.1em}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:var(--s2);top:-4rem;background:var(--amarillo);color:var(--tinta);padding:.6rem 1rem;z-index:100;font-weight:700}
.saltar:focus{top:var(--s2)}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.seccion{padding-block:var(--s5)}
.seccion--suave{background:var(--azul-claro)}
.entrada{font-size:var(--t-1);line-height:1.45;max-width:36rem}

/* ---------- Botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7rem 1.4rem;font:700 1.0625rem/1.2 var(--sans);text-decoration:none;border:2px solid var(--azul);background:var(--azul);color:#fff;border-radius:2px;cursor:pointer;transition:background-color .15s,color .15s}
.boton:hover{background:var(--azul-hondo);border-color:var(--azul-hondo)}
.boton--claro{background:#fff;color:var(--azul);border-color:#fff}
.boton--claro:hover{background:var(--azul-claro);border-color:var(--azul-claro);color:var(--azul-hondo)}
.boton--borde{background:transparent;color:var(--azul)}
.boton--borde:hover{background:var(--azul);color:#fff}
.sobre-azul .boton--borde{color:#fff;border-color:rgba(255,255,255,.7)}
.sobre-azul .boton--borde:hover{background:#fff;color:var(--azul);border-color:#fff}
.acciones{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--linea)}
.cabecera__barra{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:68px}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--tinta)}
.marca img{width:40px;height:40px}
.marca__nombre{font:700 1.25rem/1 var(--sans);letter-spacing:-.005em;color:var(--azul)}
.marca__lugar{display:block;font:400 .875rem/1.2 var(--sans);color:var(--gris);margin-top:.15rem}
.nav{display:flex;align-items:center;gap:var(--s3)}
.nav__lista{display:flex;align-items:center;gap:var(--s3);list-style:none;margin:0;padding:0}
.nav__lista>li>a,.nav__desplegar{font:400 1.0625rem/1 var(--sans);color:var(--tinta);text-decoration:none;background:none;border:0;padding:.75rem 0;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.nav__lista>li>a:hover,.nav__desplegar:hover{color:var(--azul)}
.nav__lista>li>a[aria-current="page"]{color:var(--azul);box-shadow:inset 0 -2px 0 var(--azul)}
.nav__desplegar svg{transition:transform .15s}
.nav__desplegar[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__boton{min-height:42px;padding:.55rem 1.1rem}
.menu-movil{display:none}

/* Panel de servicios (escritorio) */
.panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--linea);box-shadow:0 18px 30px -24px rgba(10,51,102,.45)}
.panel[hidden]{display:none}
.panel__rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);padding-block:var(--s4)}
.panel__grupo h2{font:700 .95rem/1.2 var(--sans);color:var(--gris);margin:0 0 var(--s2);letter-spacing:0}
.panel__grupo ul{list-style:none;padding:0;margin:0}
.panel__grupo li+li{margin-top:.25rem}
.panel__grupo a{display:block;padding:.45rem 0;text-decoration:none;color:var(--tinta)}
.panel__grupo a strong{display:block;font:600 1.125rem/1.25 var(--serif);color:var(--azul)}
.panel__grupo a span{display:block;font-size:.95rem;line-height:1.4;color:var(--gris);margin-top:.15rem}
.panel__grupo a:hover strong{text-decoration:underline;text-underline-offset:.18em}

@media (max-width:960px){
  .nav{display:none}
  .menu-movil{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .9rem;border:2px solid var(--azul);background:#fff;color:var(--azul);font:700 1rem/1 var(--sans);border-radius:2px;cursor:pointer}
  .cabecera.abierta .nav{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--linea);max-height:calc(100vh - 68px);overflow:auto;padding:var(--s2) var(--gutter) var(--s4)}
  .cabecera.abierta .nav__lista{flex-direction:column;align-items:stretch;gap:0}
  .cabecera.abierta .nav__lista>li{border-bottom:1px solid var(--linea)}
  .cabecera.abierta .nav__lista>li>a,.cabecera.abierta .nav__desplegar{width:100%;justify-content:space-between;padding:1rem 0;font-size:1.125rem}
  .cabecera.abierta .nav__lista>li>a[aria-current="page"]{box-shadow:none;font-weight:700}
  .panel{position:static;box-shadow:none;border:0}
  .panel .contenedor{padding:0}
  .panel__rejilla{grid-template-columns:1fr;gap:var(--s3);padding:0 0 var(--s3)}
  .cabecera.abierta .nav__boton{width:100%;margin-top:var(--s3)}
}

/* ---------- Portada: el monograma como composición ----------
   Como en el logotipo, la palabra descansa sobre el borde
   inferior del bloque azul y se funde con el papel. */
.portada{background:var(--azul);color:#fff;overflow:hidden}
.portada__texto{padding-top:clamp(2.5rem,7vw,5.5rem)}
.portada h1{font-family:var(--sans);font-weight:700;font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.08;letter-spacing:-.015em;max-width:21ch;margin-bottom:var(--s3)}
.portada .entrada{color:#E7EEF8}
.portada__firma{display:block;font-family:var(--serif);font-weight:700;color:#fff;font-size:min(calc((100vw - 2 * var(--gutter)) / var(--firma-ratio,7.6)),calc(var(--ancho) / var(--firma-ratio,7.6) - .6rem));line-height:.78;letter-spacing:-.045em;white-space:nowrap;margin:clamp(2.5rem,7vw,5rem) auto 0;max-width:var(--ancho);padding-inline:var(--gutter);user-select:none}
.portada__firma span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .portada__firma span{animation:subir .9s cubic-bezier(.2,.7,.2,1) both}
  .portada__firma span:nth-child(2){animation-delay:.08s}
  .portada__firma span:nth-child(3){animation-delay:.16s}
}
@keyframes subir{from{transform:translateY(100%)}to{transform:none}}

/* ---------- Cabecera de página interior ---------- */
.migas{font-size:.95rem;color:var(--gris);padding-block:var(--s2)}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.migas li+li::before{content:"/";margin-right:.4rem;color:var(--linea)}
.migas a{color:var(--gris)}
.cabeza{background:var(--azul);color:#fff;padding-block:clamp(2.5rem,6vw,4.5rem)}
.cabeza h1{max-width:20ch}
.cabeza .entrada{color:#E7EEF8}
.cabeza__rejilla{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s4);align-items:end}
.cabeza__aparte{border-left:2px solid rgba(255,255,255,.35);padding-left:var(--s3);font-size:1rem;color:#E7EEF8}
.cabeza__aparte p{margin:0 0 .5rem}
.cabeza__aparte strong{color:#fff}
@media (max-width:820px){.cabeza__rejilla{grid-template-columns:1fr}}

/* ---------- Bloques de contenido ---------- */
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:var(--s4)}
.dos>div>h2{max-width:14ch}
@media (max-width:820px){.dos{grid-template-columns:1fr;gap:var(--s2)}}

.usos{display:grid;grid-template-columns:1fr;gap:var(--s4) var(--s4);margin-top:var(--s4)}
@media (min-width:640px){.usos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.usos--3,.usos--5,.usos--6{grid-template-columns:repeat(3,1fr)}.usos--4{grid-template-columns:repeat(4,1fr)}}
.uso{border-top:3px solid var(--azul);padding-top:var(--s2)}
.uso h3{margin-bottom:.5rem}
.uso p{font-size:1.0625rem;color:#2C3846;margin:0}

.pasos{counter-reset:paso;list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s4)}
.pasos li{counter-increment:paso}
.pasos li::before{content:counter(paso);display:block;font:600 var(--t-4)/1 var(--serif);color:var(--azul);margin-bottom:var(--s1)}
.pasos h3{margin-bottom:.4rem}
.pasos p{font-size:1.0625rem;margin:0}

.publico{list-style:none;padding:0;margin:var(--s3) 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.publico li{border:1px solid var(--azul);color:var(--azul);padding:.4rem .9rem;border-radius:999px;font-size:1.0625rem}

.aviso{border-left:4px solid var(--azul);background:var(--azul-claro);padding:var(--s3);margin-top:var(--s4);max-width:46rem}
.aviso h3{font-size:var(--t-1);margin-bottom:.5rem}
.aviso p:last-child{margin-bottom:0}

.terminos{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--s4);margin-top:var(--s3)}
.terminos dt{font:600 var(--t-1)/1.2 var(--serif);color:var(--azul);margin-bottom:.4rem}
.terminos dd{margin:0}

/* Índice de servicios (portada) */
.familias{display:grid;gap:var(--s5);margin-top:var(--s4)}
.familia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:var(--s4)}
.familia>h3{font:700 1.0625rem/1.3 var(--sans);color:var(--gris);margin:.35rem 0 0}
.familia ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--linea)}
.familia li{border-bottom:1px solid var(--linea)}
.familia a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s3);padding:var(--s3) 0;text-decoration:none;color:var(--tinta);align-items:baseline}
.familia a strong{font:600 clamp(1.35rem,2.4vw,1.75rem)/1.15 var(--serif);color:var(--azul)}
.familia a span{color:#2C3846}
.familia a:hover strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
@media (max-width:820px){.familia,.familia a{grid-template-columns:1fr;gap:.4rem}}

/* Huecos de fotografía: marcas de corte de imprenta */
.huecos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:var(--s4);margin-top:var(--s4)}
.hueco{margin:0}
.hueco__marco{position:relative;aspect-ratio:4/3;background:
  repeating-linear-gradient(135deg,transparent 0 14px,rgba(15,77,149,.06) 14px 15px),var(--azul-claro);
  display:flex;align-items:center;justify-content:center;padding:var(--s3);text-align:center;color:var(--azul-hondo);font-size:1rem}
.hueco__marco::before,.hueco__marco::after{content:"";position:absolute;width:22px;height:22px;border:0 solid var(--azul)}
.hueco__marco::before{top:-9px;left:-9px;border-top-width:1px;border-left-width:1px}
.hueco__marco::after{bottom:-9px;right:-9px;border-bottom-width:1px;border-right-width:1px}
.hueco img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hueco figcaption{font-size:.95rem;color:var(--gris);margin-top:.75rem}

/* Relacionados */
.relacionados{list-style:none;padding:0;margin:var(--s3) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s2)}
.relacionados a{display:block;padding:var(--s2) var(--s3);border:1px solid var(--linea);text-decoration:none;color:var(--tinta);height:100%}
.relacionados a strong{display:block;font:600 1.15rem/1.25 var(--serif);color:var(--azul);margin-bottom:.25rem}
.relacionados a span{font-size:1rem;color:var(--gris)}
.relacionados a:hover{border-color:var(--azul)}

/* Llamada final */
.cierre{background:var(--azul);color:#fff;padding-block:var(--s5)}
.cierre__rejilla{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3)}
.cierre h2{margin:0 0 .5rem;max-width:22ch}
.cierre p{margin:0;color:#E7EEF8}

/* Datos pendientes (solo en modo borrador) */
.pendiente{display:inline-block;border:1px dashed #9A6B00;background:#FFF6CC;color:#5C4000;font:700 .875rem/1.3 var(--sans);padding:.2rem .5rem;border-radius:2px}
.pendiente-bloque{border:1px dashed #9A6B00;background:#FFF6CC;color:#5C4000;padding:var(--s2) var(--s3);font-size:1rem;margin:var(--s3) 0;max-width:46rem}
.pendiente-bloque strong{display:block;margin-bottom:.25rem}

/* ---------- Contacto ---------- */
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:var(--s5)}
@media (max-width:880px){.contacto{grid-template-columns:1fr;gap:var(--s4)}}
.datos{list-style:none;padding:0;margin:var(--s3) 0 0}
.datos li{padding:var(--s2) 0;border-top:1px solid var(--linea)}
.datos li:last-child{border-bottom:1px solid var(--linea)}
.datos span{display:block;font-size:.95rem;color:var(--gris)}
.datos a,.datos b{font-size:1.25rem}
.formulario{display:grid;gap:var(--s3)}
.campo{display:grid;gap:.4rem}
.campo label{font-weight:700}
.campo .opcional{font-weight:400;color:var(--gris)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:1.0625rem;color:var(--tinta);background:#fff;border:1.5px solid #8A96A6;border-radius:2px;padding:.7rem .8rem;min-height:48px;width:100%}
.campo textarea{min-height:9rem;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul)}
.campo [aria-invalid="true"]{border-color:#B3261E;background:#FFF7F6}
.error{color:#B3261E;font-size:.95rem;font-weight:700}
.error:empty{display:none}
.dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:600px){.dos-campos{grid-template-columns:1fr}}
.casilla{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem}
.casilla input{width:22px;height:22px;margin-top:.15rem;accent-color:var(--azul);flex:none}
.trampa{position:absolute;left:-9999px}
.estado{padding:var(--s2) var(--s3);font-weight:700;border-left:4px solid}
.estado:empty{display:none}
.estado--ok{border-color:#1E7A3A;background:#EAF6EE;color:#14532B}
.estado--mal{border-color:#B3261E;background:#FFF0EE;color:#7A1A14}
.nota-form{font-size:.95rem;color:var(--gris)}

/* Portfolio */
.proyectos{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--s4);margin-top:var(--s4)}
.proyecto img{aspect-ratio:4/3;object-fit:cover;width:100%}
.proyecto h3{margin:.9rem 0 .3rem}
.proyecto p{font-size:1.0625rem;margin:0}
.proyecto .servicio{font-size:.95rem;color:var(--gris)}
.vacio{border:1px solid var(--linea);padding:var(--s4);max-width:46rem}

/* Texto legal */
.legal{max-width:46rem}
.legal h2{font-size:var(--t-2);margin-top:var(--s4)}
.legal li{margin-bottom:.4rem}

/* ---------- Pie ---------- */
.pie{background:var(--azul-hondo);color:#D6E0EE;padding-block:var(--s5) var(--s4);font-size:1rem}
.pie a{color:#fff}
.pie__rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s4)}
.pie h2{font:700 1rem/1.3 var(--sans);color:#fff;margin:0 0 var(--s2);letter-spacing:0}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:.5rem}
.pie__marca{display:flex;gap:.8rem;align-items:center;margin-bottom:var(--s2)}
.pie__marca img{width:52px;height:52px}
.pie__marca b{font-size:1.25rem;color:#fff}
.pie__legal{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.18);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);justify-content:space-between}
@media (max-width:880px){.pie__rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pie__rejilla{grid-template-columns:1fr}}

/* Barra de contacto en móvil */
.barra-movil{display:none}
@media (max-width:700px){
  .barra-movil{display:flex;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--linea)}
  .barra-movil .boton{flex:1;min-height:46px;padding:.5rem .8rem}
  body{padding-bottom:76px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.cabecera,.barra-movil,.cierre,.pie{display:none}}

/* En móvil la firma se parte en dos líneas para ganar tamaño */
@media (max-width:640px){
  .portada__firma{--firma-ratio:4.75;line-height:.92;white-space:normal}
  .portada__firma span:nth-child(3){display:block}
}
.campo .casilla{font-weight:400}
@media (max-width:880px){.pie__rejilla>div:nth-child(3) h2{display:none}}
.panel__grupo a[aria-current="page"] strong{text-decoration:underline;text-underline-offset:.18em}
.nav__tel{font:700 1.0625rem/1 var(--sans);color:var(--azul);text-decoration:none;white-space:nowrap}
.nav__tel:hover{text-decoration:underline}
@media (max-width:960px){.cabecera.abierta .nav__tel{display:block;padding:1rem 0;font-size:1.25rem}}

/* Galería de trabajos por servicio */
.galeria{display:grid;gap:var(--s3);margin-top:var(--s3);grid-template-columns:1fr}
@media (min-width:640px){.galeria--2,.galeria--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.galeria--3{grid-template-columns:repeat(3,1fr)}}
.galeria__item{margin:0}
.galeria__abrir{display:block;overflow:hidden;background:var(--azul-claro)}
.galeria__item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s}
.galeria__abrir:hover img{transform:scale(1.03)}
.galeria__item figcaption{margin-top:.7rem;font-size:1.0625rem}
.galeria__cliente{display:block;font-size:.95rem;color:var(--gris)}
.visor{border:0;padding:0;background:transparent;max-width:min(92vw,1400px);max-height:92vh}
.visor::backdrop{background:rgba(10,20,40,.88)}
.visor img{max-width:100%;max-height:82vh;width:auto;margin:auto}
.visor p{color:#fff;margin:.8rem 0 0;max-width:none}
.visor button{position:fixed;top:1rem;right:1rem;min-height:44px;padding:.5rem 1rem;font:700 1rem var(--sans);background:#fff;color:var(--azul);border:0;border-radius:2px;cursor:pointer}
.galeria__item--completa .galeria__abrir{background:#F3F6FA}
.galeria__item--completa img{object-fit:contain;padding:var(--s2)}

/* ---------- Trabajos destacados (portada) ---------- */
.seccion--trabajos{background:var(--azul-hondo);color:#fff}
.seccion--trabajos h2{color:#fff;margin:0}
.cabecera-seccion{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s4)}
.seccion--trabajos .cabecera-seccion a{color:#fff;font-weight:700}
.destacados{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);grid-template-columns:1fr}
@media (min-width:640px){.destacados{grid-template-columns:repeat(2,1fr)}.destacado--grande{grid-column:1/-1}}
@media (min-width:1000px){.destacados{grid-template-columns:repeat(3,1fr)}.destacado--grande{grid-column:span 2;grid-row:span 2}}
.destacado a{display:flex;flex-direction:column;height:100%;color:#fff;text-decoration:none;background:rgba(255,255,255,.04)}
.destacado__foto{display:block;overflow:hidden;flex:1;min-height:0}
.destacado__foto img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.destacado--grande .destacado__foto img{aspect-ratio:auto;min-height:100%}
.destacado a:hover img{transform:scale(1.04)}
.destacado__texto{display:block;padding:.8rem 0 .2rem}
.destacado__texto strong{display:block;font:600 1.0625rem/1.3 var(--serif)}
.destacado__texto span{display:block;font-size:.95rem;color:#B9CBE4;margin-top:.15rem}
.destacado a:hover strong{text-decoration:underline;text-underline-offset:.18em}
.destacado a:focus-visible{outline-offset:4px}

/* ---------- Animaciones ---------- */
/* Fundido entre páginas (navegadores compatibles; el resto navega normal) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fundido-salida .25s ease both}
::view-transition-new(root){animation:fundido-entrada .35s ease both}
@keyframes fundido-salida{to{opacity:0}}
@keyframes fundido-entrada{from{opacity:0}}

/* Aparición suave de los bloques al hacer scroll. Solo se activa con JS (.anim en <html>),
   así que sin JS todo se ve igual que siempre. */
.anim .revelar{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--retraso,0s)}
.anim .revelar.visible{opacity:1;transform:none}

/* Entrada de la portada: el texto aparece antes que la firma */
@media (prefers-reduced-motion:no-preference){
  .portada__texto>*{animation:aparecer .8s cubic-bezier(.2,.7,.2,1) both}
  .portada__texto>*:nth-child(2){animation-delay:.08s}
  .portada__texto>*:nth-child(3){animation-delay:.16s}
  .portada__firma span{animation-delay:.25s}
  .portada__firma span:nth-child(2){animation-delay:.33s}
  .portada__firma span:nth-child(3){animation-delay:.41s}
}
@keyframes aparecer{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.boton{transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.boton:active{transform:translateY(1px)}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .anim .revelar{opacity:1;transform:none;transition:none}
}

/* Foto principal de cada servicio: monta sobre el borde del bloque azul */
.cabeza--con-foto{padding-bottom:calc(clamp(2.5rem,6vw,4.5rem) + clamp(3rem,8vw,7rem))}
.foto-servicio{margin:calc(-1 * clamp(3rem,8vw,7rem)) auto 0;position:relative}
.foto-servicio img{width:100%;aspect-ratio:16/7;object-fit:cover;background:var(--azul-claro)}
.foto-servicio figcaption{font-size:.95rem;color:var(--gris);margin-top:.6rem}
@media (max-width:640px){.foto-servicio img{aspect-ratio:4/3}}
.bloque-proyectos{margin-bottom:var(--s5)}
.bloque-proyectos__mas{margin-top:var(--s2)}
/* Una sola foto: no ocupar todo el ancho */
.galeria--1{max-width:44rem}
@media (min-width:640px){.galeria--2{max-width:none}}

/* ---------- Iconos de servicio y listas de productos ---------- */
.icono{flex:none;color:var(--azul)}
.familia__titulo{display:flex;align-items:center;gap:.8rem}
.familia__titulo .icono{width:36px;height:36px;padding:6px;border-radius:50%;background:var(--azul-claro);box-sizing:content-box}
.familia a:hover .icono{background:var(--azul);color:#fff}
.familia a .familia__texto{color:#2C3846}
.familia a{align-items:center}
.panel__grupo a{display:flex;gap:.7rem;align-items:flex-start}
.panel__grupo a .icono{width:26px;height:26px;margin-top:.1rem}
.cabecera-productos{display:flex;align-items:center;gap:.9rem;margin-bottom:var(--s3)}
.cabecera-productos h2{margin:0}
.cabecera-productos .icono{width:44px;height:44px}
.productos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:.6rem}
.productos li{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--linea);padding:.75rem .9rem;font-size:1.0625rem;border-radius:2px}
.productos li::before{content:"";flex:none;width:8px;height:8px;background:var(--azul);transform:rotate(45deg)}
.productos__nota{margin-top:var(--s3)}
@media (prefers-reduced-motion:no-preference){.familia a .icono{transition:background-color .2s,color .2s}}