/* pozossemisurgentes.uy: topbar, header transparente sobre el hero que se vuelve blanco al bajar, Oswald 700 en mayúsculas para títulos,
   menú y botones, Open Sans para el texto. Paleta acuática: azul petróleo #0B4F6C (primario), #06283D (oscuro), turquesa agua #1FB5CC
   (botones, con texto #06283D) y fondos celeste #EEF8FA. */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url("../fonts/open-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 100%; font-display: swap; src: url("../fonts/open-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/oswald-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/oswald-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root{
  --f:"Open Sans","Helvetica Neue",Arial,sans-serif;
  --f-titulos:Oswald,"Arial Narrow",sans-serif;
  --pri:#0B4F6C;--pri-2:#06283D;--rojo:#1FB5CC;--rojo-2:#17A0B5;--bordo:#0B4F6C;--amarillo:#8FE3EE;--wa:#25D366;--wa-2:#1EBE57;
  --texto:#111827;--texto-2:#4B5563;--borde:#E5E7EB;--fondo:#fff;--fondo-2:#EEF8FA;--fondo-3:#F9FAFB;--nota:#E8F6F9;
  --radio:8px;--sombra:0 6px 24px rgba(11,79,108,.10);
  /* Escala tipográfica única y fluida (de 360 px a 1280 px). Todo el sitio usa estos pasos, nada de tamaños sueltos. */
  --fs-xs:.8125rem;                                   /* 13: migas, topbar, legales */
  --fs-sm:clamp(.875rem,.85rem + .1vw,.9375rem);      /* 14–15: notas, tablas, ayudas, textos de tarjeta */
  --fs-base:clamp(1rem,.96rem + .15vw,1.0625rem);     /* 16–17: texto */
  --fs-lg:clamp(1.0625rem,.99rem + .3vw,1.25rem);     /* 17–20: bajada del hero */
  --fs-h3:clamp(1.25rem,1.15rem + .4vw,1.5rem);       /* 20–24 */
  --fs-h2:clamp(1.625rem,1.35rem + 1.1vw,2.25rem);    /* 26–36 */
  --fs-h1:clamp(2rem,1.55rem + 1.9vw,3.125rem);       /* 32–50 */
  --fs-h1-home:clamp(2.125rem,1.5rem + 2.6vw,3.5rem); /* 34–56 */
  --fs-btn:clamp(1rem,.95rem + .2vw,1.125rem);        /* 16–18, Oswald */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--f);font-size:var(--fs-base);line-height:1.65;color:var(--texto);background:var(--fondo)}
img{max-width:100%;height:auto;display:block}
a{color:var(--pri)}
a:hover{color:var(--pri-2)}
h1,h2,h3,.tarjeta__titulo,.footer__titulo,.form__grupo legend{font-family:var(--f-titulos);text-transform:uppercase;font-weight:700;letter-spacing:.015em}
h1,h2,h3{color:var(--texto);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:1.05;margin:.15em 0 .35em}
h2{font-size:var(--fs-h2);line-height:1.1;margin:1.5em 0 .45em;color:var(--pri)}
h3{font-size:var(--fs-h3);line-height:1.15;margin:1.4em 0 .4em;color:var(--bordo)}
p{margin:0 0 1em}
.contenedor{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.contenedor{padding:0 28px}}
.skip-link{position:absolute;left:-999px;top:0;background:var(--pri);color:#fff;padding:8px 12px;z-index:100}
.skip-link:focus{left:8px}
.eyebrow{font-weight:700;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--rojo);margin:0 0 .4em}

/* Botones: rectángulo de radio 8 px como Glass Doctor; el de presupuesto va en rojo */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.8em 1.3em;border-radius:var(--radio);font-family:var(--f-titulos);text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:var(--fs-btn);text-decoration:none;border:2px solid transparent;line-height:1.2;cursor:pointer;transition:background-color .2s,color .2s}
.btn--wa{background:var(--rojo);color:var(--pri-2)}
.btn--wa:hover{background:var(--rojo-2);color:var(--pri-2)}
.btn--primario{background:var(--pri);color:#fff}
.btn--primario:hover{background:var(--pri-2);color:#fff}
.btn--linea{background:#fff;color:var(--pri);border-color:var(--pri)}
.btn--linea:hover{background:var(--fondo-2)}
.btn--grande{font-size:calc(var(--fs-btn) * 1.1);padding:.85em 1.5em}
.btn--bloque{width:100%}

/* Barra superior: azul de la marca, solo desde 860 px (en celular no va); se va con el scroll */
.topbar{display:none;background:var(--pri);color:#fff;font-size:var(--fs-xs);font-weight:600;position:relative;z-index:51}
@media (min-width:860px){.topbar{display:block}}
.topbar__fila{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:38px}
.topbar i{color:#fff;opacity:.85;margin-right:5px}
.topbar__zona,.topbar__horario{color:#DCEFF4}
.topbar__horario{display:none}
.topbar__zona{display:inline-flex;align-items:center}
@media (min-width:1180px){.topbar__horario{display:inline-flex;align-items:center}}
.topbar__acciones{display:flex;align-items:center;gap:22px}
.topbar a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;letter-spacing:.02em}
.topbar a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Header: blanco y sólido (sin blur); sobre el hero arranca transparente */
:root{--alto-header:64px}
@media (min-width:1100px){:root{--alto-header:80px}}
.header{position:sticky;top:0;z-index:50;background:#fff;transition:background-color .25s,box-shadow .25s}
.header.is-scrolled,.header.menu-abierto{box-shadow:0 6px 20px rgba(17,24,39,.08)}
.header__fila{display:flex;align-items:center;gap:20px;min-height:64px}
@media (min-width:1100px){.header__fila{min-height:80px}}
.logo{display:block;text-decoration:none;flex:0 0 auto}
.logo__img{width:136px;height:auto}
@media (min-width:1100px){.logo__img{width:168px}}
.logo__img--claro{display:none}

/* Menú de escritorio: Oswald en mayúsculas, raya roja abajo en hover y en la sección activa */
.nav{display:none;flex:1;align-self:stretch}
.nav__lista{display:flex;justify-content:center;align-items:stretch;gap:2px;list-style:none;margin:0;padding:0;height:100%}
.nav__item{position:relative;display:flex}
.nav__link{position:relative;display:flex;align-items:center;padding:0 14px;text-decoration:none;color:var(--texto);font-family:var(--f-titulos);font-weight:700;font-size:var(--fs-btn);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:18px;height:3px;border-radius:2px;background:var(--rojo);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav__link:hover,.nav__link[aria-current]{color:var(--pri)}
.nav__link:hover::after,.nav__link[aria-current]::after,.nav__item--sub:focus-within>.nav__link::after{transform:scaleX(1)}
.nav__panel{position:absolute;top:100%;left:50%;min-width:250px;padding-top:0;opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.nav__item--sub:hover .nav__panel,.nav__item--sub:focus-within .nav__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav__sub{list-style:none;margin:0;padding:10px;background:#fff;border-top:3px solid var(--rojo);border-radius:0 0 var(--radio) var(--radio);box-shadow:0 18px 40px rgba(17,24,39,.16)}
.nav__item--ancho .nav__sub{display:grid;grid-template-columns:1fr 1fr;column-gap:6px;min-width:440px}
.nav__sub a{display:block;padding:9px 12px;border-radius:6px;font-size:var(--fs-sm);font-weight:600;color:var(--texto);text-decoration:none;border-left:3px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.nav__sub a:hover,.nav__sub a[aria-current]{background:var(--fondo-2);color:var(--pri);border-left-color:var(--rojo)}

.header__acciones{margin-left:auto;display:flex;align-items:center;gap:6px}
.header__cta{padding:.6em 1.1em;white-space:nowrap;flex-shrink:0}
@media (min-width:1100px) and (max-width:1279px){.nav__link{padding:0 10px}.nav__link::after{left:10px;right:10px}}
.header__cta span{display:none}
@media (min-width:600px) and (max-width:1099px),(min-width:1280px){.header__cta span{display:inline}}

/* Hamburguesa que se vuelve X */
.burger{width:46px;height:46px;border:0;background:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer;padding:0;border-radius:var(--radio)}
.burger span{display:block;width:24px;height:2.5px;background:var(--texto);border-radius:2px;transition:transform .25s,opacity .2s,background-color .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
@media (min-width:1100px){.nav{display:block}.burger{display:none}}

/* Menú de celular: panel blanco a pantalla completa bajo el header */
.menu-movil{background:#fff;border-top:1px solid var(--borde);padding:8px 0 28px;max-height:calc(100dvh - var(--alto-header));overflow:auto;overscroll-behavior:contain}
.menu-movil__lista{list-style:none;margin:0 0 20px;padding:0}
.menu-movil__lista>li{border-bottom:1px solid var(--borde)}
.menu-movil__lista>li>a,.menu-movil__lista summary{display:flex;align-items:center;justify-content:space-between;padding:15px 2px;font-family:var(--f-titulos);font-weight:700;font-size:var(--fs-h3);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;color:var(--texto);cursor:pointer;list-style:none}
.menu-movil__lista summary::-webkit-details-marker{display:none}
.menu-movil__lista>li>a[aria-current],.menu-movil__lista details[open]>summary{color:var(--pri)}
.menu-movil__flecha{font-size:.7em;color:var(--rojo);transform:rotate(90deg);transition:transform .2s}
.menu-movil__lista details[open] .menu-movil__flecha{transform:rotate(-90deg)}
.menu-movil__sub{list-style:none;margin:0 0 12px;padding:4px 0 4px 14px;border-left:3px solid var(--rojo)}
.menu-movil__sub a{display:block;padding:9px 4px;font-weight:600;color:var(--texto-2);text-decoration:none}
.menu-movil__sub a[aria-current]{color:var(--pri)}
.menu-movil__acciones{display:grid;gap:10px}
.menu-movil__zona{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:var(--fs-sm);color:var(--texto-2)}
.menu-movil__zona i{color:var(--rojo)}

/* Sobre el hero: transparente con textos blancos hasta que el header llega arriba o se abre el menú */
.header--sobre-hero{margin-bottom:calc(-1 * var(--alto-header))}
.header--sobre-hero~main>.hero:first-child{padding-top:calc(28px + var(--alto-header))}
.header--sobre-hero~main>.hero--home:first-child{padding-top:calc(52px + var(--alto-header))}
.header--sobre-hero:not(.is-scrolled):not(.menu-abierto){background:transparent}
.header--sobre-hero:not(.is-scrolled):not(.menu-abierto) .logo__img{display:none}
.header--sobre-hero:not(.is-scrolled):not(.menu-abierto) .logo__img--claro{display:block}
.header--sobre-hero:not(.is-scrolled):not(.menu-abierto) .nav__link{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.header--sobre-hero:not(.is-scrolled):not(.menu-abierto) .burger span{background:#fff}

/* Hero */
/* Hero: azul rey con texto blanco, como el bloque principal de Glass Doctor */
.hero{background:var(--pri);color:#fff;padding:28px 0 40px}
.hero--home{padding:52px 0 60px;background:linear-gradient(180deg,var(--pri) 0,var(--pri-2) 100%)}
.hero h1{color:#fff}
.hero--home h1{font-size:var(--fs-h1-home)}
.hero .eyebrow{color:#fff;opacity:.85}
.hero__lead{font-size:var(--fs-lg);color:#E3F2F6;max-width:760px}
.hero__lead a{color:#fff}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hero .btn--linea{background:transparent;color:#fff;border-color:#fff}
.hero .btn--linea:hover{background:#fff;color:var(--pri)}

/* Hero con fotos de fondo que pasan con fundido (sitio.js); capa azul encima para que el texto blanco se lea */
.hero--foto{position:relative;overflow:hidden;isolation:isolate;background:#06283D}
.hero__fondo{position:absolute;inset:0;z-index:-2}
.hero__fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity 1.4s ease,transform 7s ease-out}
.hero__fondo img.activa{opacity:1;transform:scale(1.08)}
.hero--foto::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,40,61,.92) 0%,rgba(6,40,61,.7) 40%,rgba(6,40,61,.35) 80%,rgba(6,40,61,.3) 100%)}
.hero--foto .hero__contenido{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero--foto .btn{text-shadow:none}
@media (prefers-reduced-motion:reduce){.hero__fondo img{transition:none;transform:none}.hero__fondo img.activa{transform:none}}

.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;font-size:var(--fs-xs);color:#C2E0E9}
.migas li+li::before{content:"›";margin-right:6px}
.migas a{color:#fff}

/* Cuerpo: secciones con aire y fondos alternados para separar los temas sin recargar */
.banda{padding:clamp(40px,5vw,72px) 0}
.banda:nth-of-type(even){background:var(--fondo-3)}
.banda__titulo{margin-top:0}
.banda__grilla{display:grid;gap:28px;align-items:start}
.banda__grilla>*{min-width:0}
@media (min-width:900px){.banda__grilla{grid-template-columns:5fr 7fr;gap:56px}.banda--invertida .banda__foto{order:2}.banda__foto{position:sticky;top:104px}}
.prosa{max-width:820px}
.banda__grilla .prosa{max-width:none}
.prosa>h2:first-child{margin-top:0}
.prosa h2::after,.banda__titulo::after,.contacto-final h2::after{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--rojo);margin-top:14px}
.prosa h3{margin-top:1.6em}
.prosa li{margin:.45em 0}
/* Listas: punto rojo, sin íconos */
.prosa ul:not(.lista-iconos):not(.grilla-servicios){list-style:none;padding-left:0}
.prosa ul:not(.lista-iconos):not(.grilla-servicios)>li{position:relative;padding-left:1.35em}
.prosa ul:not(.lista-iconos):not(.grilla-servicios)>li::before{content:"";position:absolute;left:.15em;top:.68em;width:7px;height:7px;border-radius:2px;background:var(--rojo)}
/* Pasos numerados: línea de tiempo con número en círculo */
/* Pasos numerados (lista 1. 2. 3.): tarjetas del sistema de a 2 columnas, con pestaña turquesa, sombra recta y el número grande;
   en celular, el número a la izquierda del texto. La home (Cómo trabajamos) las pone en 4 columnas con flechas. */
.prosa ol:not(.lista-iconos){list-style:none;padding-left:0;counter-reset:paso;margin:1.6em 0;display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){.prosa ol:not(.lista-iconos){grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.prosa ol:not(.lista-iconos)>li{counter-increment:paso;position:relative;margin:0;padding:64px 20px 20px;min-height:0;border:1px solid #CFE6ED;border-radius:16px;box-shadow:5px 5px 0 #D3ECF2;background:linear-gradient(var(--rojo),var(--rojo)) 0 0/64px 5px no-repeat,#fff;line-height:1.55}
.prosa ol:not(.lista-iconos)>li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:20px;top:18px;color:var(--rojo);font-family:var(--f-titulos);font-weight:700;font-size:2.125rem;line-height:1}
@media (max-width:639px){.prosa ol:not(.lista-iconos)>li{padding:18px 16px 18px 70px}.prosa ol:not(.lista-iconos)>li::before{left:16px;top:16px;font-size:1.875rem}}
/* Lista con íconos (Cómo trabajamos): ícono azul en círculo celeste */
.lista-iconos{list-style:none;padding-left:0;display:grid;gap:14px;margin:1.4em 0}
.lista-iconos li{position:relative;padding-left:3.4em;margin:0;min-height:2.6em;display:flex;align-items:center}
.lista-iconos li::before{content:"";position:absolute;left:0;top:50%;width:2.6em;height:2.6em;margin-top:-1.3em;border-radius:50%;background:var(--fondo-2)}
.lista-iconos li>i,.lista-iconos li>.icono{position:absolute;left:.7em;top:50%;margin-top:-.6em;width:1.2em;height:1.2em;font-size:1.2em;color:var(--pri)}
/* Si la lista con íconos es de pasos (ol), los círculos se alinean arriba y una línea los une */
ol.lista-iconos{gap:0}
ol.lista-iconos li{align-items:flex-start;padding-top:.45em;padding-bottom:1.1em;min-height:3.7em}
ol.lista-iconos li::before{top:0;margin-top:0}
ol.lista-iconos li>i,ol.lista-iconos li>.icono{top:.7em;margin-top:0}
ol.lista-iconos li::after{content:"";position:absolute;left:calc(1.3em - 1px);top:2.75em;bottom:.15em;width:2px;background:#B6D7E1}
ol.lista-iconos li:last-child{padding-bottom:0;min-height:2.6em}
ol.lista-iconos li:last-child::after{display:none}
.nota{background:var(--nota);border-left:4px solid var(--rojo);padding:14px 18px;border-radius:10px;margin:1.2em 0}
/* Fotos */
.foto{margin:1.2em 0}
.foto img{border-radius:12px;box-shadow:0 18px 40px rgba(17,24,39,.12)}
.foto figcaption{margin-top:10px;font-size:var(--fs-xs);color:var(--texto-2)}
.foto--pendiente .foto__marco{border:2px dashed var(--borde);border-radius:12px;padding:20px;background:var(--fondo-2);color:var(--texto-2);font-size:var(--fs-sm)}
.foto__alt{font-style:italic;margin:0}
/* Tablas: marco redondeado, encabezado azul, filas alternadas */
.tabla-wrap{overflow-x:auto;margin:1.4em 0;border:1px solid var(--borde);border-radius:12px;background:#fff;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);line-height:1.5}
th,td{border:0;border-bottom:1px solid var(--borde);padding:12px 14px;text-align:left;vertical-align:top}
th{background:var(--pri);color:#fff;font-family:var(--f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-sm)}
tbody tr:nth-child(even){background:var(--fondo-3)}
tbody tr:last-child td{border-bottom:0}
td:first-child{font-weight:700;color:var(--texto)}
/* Preguntas frecuentes: tarjetas con + que gira a × al abrir */
.faq__item{border:1px solid var(--borde);border-radius:12px;margin:10px 0;background:#fff;transition:border-color .2s,box-shadow .2s}
.faq__item[open]{border-color:#C6E3EB;box-shadow:var(--sombra)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;font-weight:700;cursor:pointer;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--pri)}
.faq__icono{flex:0 0 auto;color:var(--rojo);font-size:.95em;transition:transform .2s}
.faq__item[open] .faq__icono{transform:rotate(45deg)}
.faq__a{padding:0 20px 18px;color:var(--texto-2)}
.faq__a>:last-child{margin-bottom:0}
/* Llamado dentro del texto */
.cta-inline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:1.6em 0;padding:20px 22px;background:#fff;border:1px solid var(--borde);border-left:4px solid var(--rojo);border-radius:12px}
.cta-inline__nota{flex-basis:100%;margin:0;font-size:var(--fs-sm);color:var(--texto-2)}
.actualizado{display:flex;align-items:center;gap:8px;color:var(--texto-2);font-size:var(--fs-sm);margin-top:28px}

/* Tarjetas: se levantan al pasar el mouse y la flecha avanza */
.tarjetas{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tarjetas--chicas{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.tarjeta{display:flex;flex-direction:column;background:#fff;border:1px solid var(--borde);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--texto);transition:transform .2s,box-shadow .2s,border-color .2s}
.tarjeta:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(17,24,39,.12);border-color:#CFE6ED;color:var(--texto)}
.tarjeta img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .4s}
.tarjeta:hover img{transform:scale(1.04)}
.tarjeta__cuerpo{position:relative;z-index:1;background:#fff;padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.tarjeta__titulo{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:calc(var(--fs-h3) * .9);line-height:1.15;color:var(--pri)}
.tarjeta__flecha{flex:0 0 auto;color:var(--rojo);font-size:.75em;transition:transform .2s}
.tarjeta:hover .tarjeta__flecha{transform:translateX(4px)}
.tarjeta__texto{font-size:var(--fs-sm);line-height:1.55;color:var(--texto-2)}

/* Calculadora y formulario: tarjeta blanca con filete azul arriba */
.calc,.form-card{background:#fff;border:1px solid var(--borde);border-top:4px solid var(--pri);border-radius:12px;padding:clamp(18px,3vw,28px);box-shadow:var(--sombra);margin:1.4em 0;max-width:820px}
.calc__fila,.form__fila{display:grid;gap:14px;margin-bottom:14px}
@media (min-width:640px){.calc__fila{grid-template-columns:1fr 1fr}.form__fila{grid-template-columns:1fr 1fr}}
.calc__campo,.form__campo{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);font-weight:600}
input,select,textarea{font:inherit;font-weight:400;padding:10px 12px;min-height:46px;border:1px solid #C8D1DE;border-radius:8px;background:#fff;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px rgba(11,79,108,.14)}
.calc__resultado{display:flex;flex-direction:column;gap:4px;background:var(--pri);color:#E3F2F6;border-radius:10px;padding:18px 20px;margin:8px 0 16px}
.calc__resultado strong{color:#fff}
.calc__linea--total strong{font-family:var(--f-titulos);font-size:var(--fs-h2);letter-spacing:.02em;line-height:1.1}
.calc__nota{font-size:var(--fs-sm);line-height:1.55;color:#C2E0E9}
.calc__wa{width:100%}
.form__grupo{border:0;padding:0;margin:0 0 18px}
.form__grupo legend{display:flex;align-items:center;gap:10px;font-size:var(--fs-h3);color:var(--pri);margin-bottom:12px}
.form__grupo legend i{color:var(--rojo);font-size:.85em}
.form__fotos-caja{display:flex;align-items:center;gap:14px;padding:14px 16px;border:2px dashed #C8D1DE;border-radius:10px;background:var(--fondo-3);font-weight:400}
.form__fotos-caja>i{font-size:1.6em;color:var(--pri)}
.form__fotos-caja input{border:0;padding:0;min-height:0;background:transparent}
.form__fotos-caja input::file-selector-button{font:inherit;font-weight:700;margin-right:12px;padding:8px 14px;border:2px solid var(--pri);border-radius:8px;background:#fff;color:var(--pri);cursor:pointer}
.form__ayuda,.form__nota{font-size:var(--fs-sm);color:var(--texto-2)}
.form__nota{margin:14px 0 0}
.form__hp{position:absolute;left:-9999px}
.form-card__error{background:#fde8e8;color:#8a1c1c;padding:10px 14px;border-radius:8px}

/* Contacto final: tarjeta azul con ícono de ducha */
.contacto-final{padding:clamp(48px,6vw,80px) 0 0}
.contacto-final__tarjeta{display:grid;gap:20px;background:var(--pri);color:#E3F2F6;border-radius:16px;padding:clamp(26px,4vw,48px)}
@media (min-width:900px){.contacto-final__tarjeta{grid-template-columns:auto 1fr;gap:36px;align-items:start}}
.contacto-final__icono{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:36px}
.contacto-final h2{color:#fff;margin-top:0}
.contacto-final p{max-width:640px}
.contacto-final .hero__cta{margin-top:24px}
.contacto-final .btn--linea{background:transparent;color:#fff;border-color:#fff}
.contacto-final .btn--linea:hover{background:#fff;color:var(--pri)}
.wa-flotante{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:var(--sombra);z-index:40;text-decoration:none}
/* Footer: azul de la marca, columna de marca con CTA y cuatro columnas de links; franja de abajo en el mismo azul */
.footer{background:var(--pri);color:#D6EDF2;margin-top:40px;padding-top:clamp(40px,5vw,64px);font-size:var(--fs-sm)}
.footer a{color:#fff}
.footer__grilla{display:grid;gap:36px 28px;grid-template-columns:1fr;padding-bottom:clamp(36px,4vw,56px)}
@media (min-width:600px){.footer__grilla{grid-template-columns:1fr 1fr}.footer__marca{grid-column:1/-1}}
@media (min-width:900px){.footer__grilla{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1240px){.footer__grilla{grid-template-columns:1.55fr repeat(4,minmax(0,1fr));gap:32px}.footer__marca{grid-column:auto}}
.footer__logo{display:inline-block;margin-bottom:14px}
.footer__logo img{width:200px;height:auto}
.footer__bajada{max-width:340px;margin:0 0 18px;line-height:1.6}
.footer__cta{margin-bottom:20px;white-space:nowrap}
.footer__contacto{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer__contacto li{display:flex;align-items:center;gap:10px}
.footer__contacto i{color:#fff;opacity:.85}
.footer__contacto a{font-family:var(--f-titulos);font-weight:700;font-size:var(--fs-h3);letter-spacing:.03em;text-decoration:none}
.footer__titulo{position:relative;font-size:calc(var(--fs-h3) * .78);white-space:nowrap;letter-spacing:.04em;color:#fff;margin:0 0 18px;padding-bottom:10px}
.footer__titulo::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:2px;background:var(--rojo)}
.footer__lista ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer__lista a{color:#D6EDF2;text-decoration:none;line-height:1.4;transition:color .15s}
.footer__lista a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--rojo);text-decoration-thickness:2px;text-underline-offset:4px}
.footer__abajo{border-top:1px solid rgba(255,255,255,.14);padding:18px 0;font-size:var(--fs-xs);color:#AFD3DE}
.footer__abajo-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;justify-content:space-between}
.footer__secundario{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px}
.footer__secundario a,.footer__creditos a{color:#D6EDF2;text-decoration:none}
.footer__secundario a:hover,.footer__creditos a:hover{color:#fff;text-decoration:underline}
body.menu-abierto{overflow:hidden}

/* ===== Espacios para el diseño (provisorio) ===== */
.icono{display:inline-block;width:1.15em;height:1.15em;border:1.5px dashed currentColor;border-radius:4px;opacity:.55;vertical-align:-.18em;flex:0 0 auto}
.icono::after{content:attr(data-icono);display:none}
.wa-flotante .icono{width:28px;height:28px;border-color:#fff;opacity:.9}
.tarjeta__icono{display:flex;align-items:center;justify-content:center;height:96px;background:var(--fondo-2);font-size:2rem;color:var(--texto-2)}
.contacto-final__icono .icono{width:40px;height:40px}
.hero__pendiente{position:absolute;right:12px;bottom:10px;max-width:min(520px,90%);font-size:var(--fs-xs);line-height:1.4;color:#E5E7EB;border:1.5px dashed rgba(255,255,255,.45);border-radius:6px;padding:6px 10px;background:rgba(255,255,255,.06)}
.foto--pendiente .foto__marco{min-height:220px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.foto--pendiente .foto__marco .icono{width:32px;height:32px}
.tabla-nota{font-size:var(--fs-sm);color:var(--texto-2);margin-top:-.4em}
.calc__check{display:flex;align-items:center;gap:8px;flex-direction:row}
.calc__check input{width:auto;min-height:0}
.faq__icono{font-weight:700;font-size:1.4em;line-height:1}

/* Ventajas bajo el hero (10/2026): tarjeta blanca montada sobre el borde del hero, íconos en azul,
   título Oswald con rayita roja como el menú. Celular: filas con el ícono a la izquierda. */
.franja.ventajas { position: relative; z-index: 2; background: transparent; border: 0; padding: 0; margin-top: -32px; }
.ventajas__tarjeta { display: grid; grid-template-columns: 1fr; background: #fff; border-radius: 12px; box-shadow: 0 18px 40px rgba(17,24,39,.12); border-top: 4px solid var(--pri); }
.ventaja.franja__item { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: start; padding: 20px; border-bottom: 1px solid var(--borde); }
.ventaja.franja__item:last-child { border-bottom: 0; }
.ventaja__ico { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; color: var(--pri); }
.franja__item .ventaja__ico { margin: 0; font-size: inherit; line-height: 0; }
.ventaja__ico svg { width: 36px; height: 36px; }
.ventaja.franja__item strong { position: relative; align-self: end; margin: 0; padding-bottom: 8px; font-family: var(--f-titulos); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 1.25rem; line-height: 1.1; color: var(--pri); }
.ventaja.franja__item strong::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--rojo); }
.ventaja.franja__item > span:last-child { grid-column: 2; margin: 4px 0 0; font-size: .9375rem; line-height: 1.55; color: var(--texto-2); }
@media (min-width: 720px) {
  .franja.ventajas { margin-top: -40px; }
  .ventajas__tarjeta { grid-template-columns: repeat(3, 1fr); }
  .ventaja.franja__item { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 0; padding: 28px 24px 30px; border-bottom: 0; border-right: 1px solid var(--borde); }
  .ventaja.franja__item:last-child { border-right: 0; }
  .ventaja__ico { grid-row: auto; width: auto; height: auto; place-items: start; margin-bottom: 16px; }
  .ventaja__ico svg { width: 40px; height: 40px; }
  .ventaja.franja__item strong { font-size: 1.375rem; padding-bottom: 10px; }
  .ventaja.franja__item > span:last-child { grid-column: auto; margin-top: 12px; }
}
@media (min-width: 1024px) {
  .franja.ventajas { margin-top: -48px; }
  .ventaja.franja__item { padding: 32px 32px 34px; }
  .ventaja__ico svg { width: 44px; height: 44px; }
  .ventaja.franja__item strong { font-size: 1.5rem; }
  .ventaja.franja__item > span:last-child { font-size: 1rem; }
}
:root { --ventajas-solape: 32px; }
@media (min-width: 720px) { :root { --ventajas-solape: 40px; } }
@media (min-width: 1024px) { :root { --ventajas-solape: 48px; } }
.franja.ventajas { margin-top: calc(-1 * var(--ventajas-solape)); }
.header--sobre-hero~main>.hero--home:first-child{padding-bottom:calc(60px + var(--ventajas-solape))}
.ventaja.franja__item .ventaja__ico { color: var(--pri); }
/* Íconos propios (dibujados a mano, trazo lineal): más grandes porque tienen detalle */
.ventaja.franja__item { grid-template-columns: 52px 1fr; }
.ventaja__ico { width: 52px; height: 52px; }
.ventaja__ico svg { width: 52px; height: 52px; }
@media (min-width: 720px) { .ventaja.franja__item { grid-template-columns: 1fr; } .ventaja__ico { width: auto; height: auto; } .ventaja__ico svg { width: 56px; height: 56px; } }
@media (min-width: 1024px) { .ventaja__ico svg { width: 64px; height: 64px; } }

/* Logo: proporción 3,3:1 */
.logo__img{width:168px}
@media (min-width:1100px){.logo__img{width:228px}}
.footer__logo img{width:220px;height:auto}
/* Hero sin foto todavía: azul noche de la marca bajo el velo */
.hero--foto{background:#06283D}
.hero--foto .eyebrow{color:var(--amarillo);opacity:1}
/* Nota de imagen de fondo pendiente: arriba a la derecha, debajo del header, para que no la tape la tarjeta de ventajas */
.hero__pendiente{top:calc(var(--alto-header) + 48px);bottom:auto}
@media (max-width:859px){.hero__pendiente{display:none}}
/* Íconos chicos: Font Awesome Free (SVG en línea, color del texto). Los grandes (.icono--grande) siguen como espacio. */
svg.icono--fa{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex:0 0 auto;border:0;opacity:1;overflow:visible}
.btn svg.icono--fa{width:1.15em;height:1.15em}
.topbar svg.icono--fa{width:.95em;height:.95em;margin-right:5px;opacity:.9}
.lista-iconos svg.icono--fa{color:var(--pri)}
.wa-flotante svg.icono--fa{width:30px;height:30px;color:#fff}
.form__grupo legend svg.icono--fa,.form__fotos-caja svg.icono--fa{color:var(--rojo)}
.footer__contacto svg.icono--fa{color:#fff;opacity:.85;margin-right:4px}
.foto--pendiente .foto__marco svg.icono--fa{width:28px;height:28px}
/* Íconos grandes (tarjetas, ventajas, contacto): Flaticon "Detailed Outline" de Graphix's Art, PNG 128 px usados como máscara: toman el color del texto (currentColor). IDs en public/images/iconos/iconos.json. */
.icono--grande{display:inline-block;width:56px;height:56px;border:0;border-radius:0;opacity:1;background-color:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.icono--grande[data-icono="alambrado"]{--ico:url(../images/iconos/alambrado.png)}
.icono--grande[data-icono="alerta"]{--ico:url(../images/iconos/alerta.png)}
.icono--grande[data-icono="calculadora"]{--ico:url(../images/iconos/calculadora.png)}
.icono--grande[data-icono="campo"]{--ico:url(../images/iconos/campo.png)}
.icono--grande[data-icono="casa"]{--ico:url(../images/iconos/casa.png)}
.icono--grande[data-icono="cerco"]{--ico:url(../images/iconos/cerco.png)}
.icono--grande[data-icono="cinta-metrica"]{--ico:url(../images/iconos/cinta-metrica.png)}
.icono--grande[data-icono="concertina"]{--ico:url(../images/iconos/concertina.png)}
.icono--grande[data-icono="documento-ley"]{--ico:url(../images/iconos/documento-ley.png)}
.icono--grande[data-icono="empresa"]{--ico:url(../images/iconos/empresa.png)}
.icono--grande[data-icono="escudo"]{--ico:url(../images/iconos/escudo.png)}
.icono--grande[data-icono="etiqueta-precio"]{--ico:url(../images/iconos/etiqueta-precio.png)}
.icono--grande[data-icono="herramientas"]{--ico:url(../images/iconos/herramientas.png)}
.icono--grande[data-icono="libro"]{--ico:url(../images/iconos/libro.png)}
.icono--grande[data-icono="madera"]{--ico:url(../images/iconos/madera.png)}
.icono--grande[data-icono="malla"]{--ico:url(../images/iconos/malla.png)}
.icono--grande[data-icono="mapa"]{--ico:url(../images/iconos/mapa.png)}
.icono--grande[data-icono="obra"]{--ico:url(../images/iconos/obra.png)}
.icono--grande[data-icono="pala"]{--ico:url(../images/iconos/pala.png)}
.icono--grande[data-icono="perro"]{--ico:url(../images/iconos/perro.png)}
.icono--grande[data-icono="piscina"]{--ico:url(../images/iconos/piscina.png)}
.icono--grande[data-icono="planta"]{--ico:url(../images/iconos/planta.png)}
.icono--grande[data-icono="poste"]{--ico:url(../images/iconos/poste.png)}
.icono--grande[data-icono="pvc"]{--ico:url(../images/iconos/pvc.png)}
.icono--grande[data-icono="tejido"]{--ico:url(../images/iconos/tejido.png)}
.icono--grande[data-icono="terreno"]{--ico:url(../images/iconos/terreno.png)}
.icono--grande[data-icono="vecinos"]{--ico:url(../images/iconos/vecinos.png)}
/* Íconos grandes del rubro pozos: SVG de Font Awesome Free como máscara (mismo color del texto) */
.icono--grande[data-icono="pozo"]{--ico:url(../images/fa/pozo.svg)}
.icono--grande[data-icono="bomba"]{--ico:url(../images/fa/bomba.svg)}
.icono--grande[data-icono="gota"]{--ico:url(../images/fa/gota.svg)}
.icono--grande[data-icono="tanque"]{--ico:url(../images/fa/tanque.svg)}
.icono--grande[data-icono="sol"]{--ico:url(../images/fa/sol.svg)}
.icono--grande[data-icono="lupa"]{--ico:url(../images/fa/lupa.svg)}
.icono--grande[data-icono="canilla"]{--ico:url(../images/fa/canilla.svg)}
.icono--grande[data-icono="presion"]{--ico:url(../images/fa/presion.svg)}
.icono--grande[data-icono="medidor"]{--ico:url(../images/fa/medidor.svg)}
.icono--grande[data-icono="llave-inglesa"]{--ico:url(../images/fa/llave-inglesa.svg)}
.icono--grande[data-icono="camion"]{--ico:url(../images/fa/camion.svg)}
.icono--grande[data-icono="plano"]{--ico:url(../images/fa/plano.svg)}
.tarjeta__icono{color:var(--pri);background:var(--fondo-2)}
.tarjeta__icono .icono--grande{width:64px;height:64px}
.ventaja__ico .icono--grande{width:100%;height:100%;color:var(--pri)}
@media (min-width:720px){.ventaja__ico .icono--grande{width:56px;height:56px}}
@media (min-width:1024px){.ventaja__ico .icono--grande{width:64px;height:64px}}
.contacto-final__icono .icono--grande{width:48px;height:48px;color:#fff}
/* "Qué arreglamos" (home): grilla de tarjetas con ícono grande de Flaticon en círculo, servicio en Oswald azul,
   raya roja que crece y el ícono que pasa a rojo al pasar el mouse. La sección va a todo el ancho sobre celeste. */
.banda:has(.grilla-servicios){background:var(--fondo-2)}
.banda:has(.grilla-servicios) .prosa{max-width:none}
.banda:has(.grilla-servicios) .prosa>p{max-width:760px;font-size:var(--fs-lg)}
.grilla-servicios{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.grilla-servicios{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grilla-servicios{grid-template-columns:repeat(3,1fr);gap:22px}}
.grilla-servicios__item{position:relative;display:flex;gap:16px;align-items:flex-start;margin:0;padding:22px 20px 24px;background:#fff;border:1px solid var(--borde);border-radius:14px;box-shadow:0 4px 14px rgba(11,79,108,.06);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.grilla-servicios__item::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:44px;background:var(--rojo);border-radius:0 2px 0 0;transition:width .3s ease}
.grilla-servicios__item:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(11,79,108,.14);border-color:#C6E3EB}
.grilla-servicios__item:hover::after{width:100%}
.grilla-servicios__ico{flex:0 0 auto;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--fondo-2);color:var(--pri);transition:background-color .2s ease,color .2s ease}
.grilla-servicios__ico .icono--grande{width:44px;height:44px}
.grilla-servicios__item:hover .grilla-servicios__ico{background:var(--rojo);color:var(--pri-2)}
.grilla-servicios__txt{font-size:var(--fs-sm);line-height:1.55;color:var(--texto-2);padding-top:4px}
.grilla-servicios__txt>a:first-child{display:block;margin-bottom:4px;font-family:var(--f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:var(--fs-h3);line-height:1.15;color:var(--pri);text-decoration:none}
.grilla-servicios__txt>a:first-child::after{content:"\00a0\2192";color:var(--rojo);font-family:var(--f);white-space:nowrap}
.grilla-servicios__txt a{color:var(--pri)}
.grilla-servicios__item:hover .grilla-servicios__txt>a:first-child{color:var(--pri-2)}
@media (prefers-reduced-motion:reduce){.grilla-servicios__item,.grilla-servicios__item::after,.grilla-servicios__ico{transition:none}.grilla-servicios__item:hover{transform:none}}
.grilla-servicios__ico{background:#DCEFF4}
.hero__fondo img.activa{transform:none}

/* Logo en texto si falta public/images/logo/logo.webp */
.logo__texto{display:block;font-family:var(--f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.55rem,1.2rem + 1.2vw,2.1rem);line-height:1;color:var(--pri)}
.logo__texto span{color:var(--rojo)}
.header--sobre-hero:not(.is-scrolled):not(.menu-abierto) .logo__texto{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.logo__texto--claro{color:#fff;font-size:2.1rem}
.logo__texto--claro span{color:var(--amarillo)}
.calc__linea:empty{display:none}
/* Menos es más (19/10): hero con H1 + bajada corta + botones; sin ventajas superpuestas en la home.
   La respuesta larga (lead) abre el cuerpo como primer párrafo, un paso más grande que el resto. */
.header--sobre-hero~main>.hero--home:first-child{padding-bottom:64px}
.hero__lead{max-width:640px}
.cuerpo>.banda:first-child .prosa>p:first-child{font-size:var(--fs-lg);line-height:1.6;color:var(--texto)}
/* Celular: los dos botones del hero a todo el ancho, uno debajo del otro */
@media (max-width:719px){.hero__cta{flex-direction:column}.hero__cta .btn{width:100%}}
/* Servicios y usos de la home con foto (stock editado con ChatGPT, images/fotos/tarjetas). Tarjeta blanca con pestaña turquesa,
   sombra recta sin desenfoque y toda la tarjeta clickeable (el ::before del título la cubre). Los 3 servicios van más grandes que
   los 4 usos. En celular la foto va a la izquierda y se funde en blanco hacia el texto. */
.grilla-servicios--fotos{gap:18px}
@media (min-width:1000px){
  .grilla-servicios--fotos{gap:22px}
  /* 7 tarjetas (servicios y usos): 3 grandes arriba y 4 abajo; 4 tarjetas (zonas): una fila de 4 */
  .grilla-servicios--n7{grid-template-columns:repeat(12,1fr)}
  .grilla-servicios--n7>.grilla-servicios__item{grid-column:span 3}
  .grilla-servicios--n7>.grilla-servicios__item:nth-child(-n+3){grid-column:span 4}
  .grilla-servicios--n4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.grilla-servicios--fotos>.grilla-servicios__item{flex-direction:column;align-items:stretch;gap:0;padding:0;border:1px solid #CFE6ED;border-radius:16px;box-shadow:5px 5px 0 #D3ECF2;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.grilla-servicios--fotos>.grilla-servicios__item::after{top:0;bottom:auto;width:64px;height:5px;border-radius:0 0 3px 0;z-index:3}
.grilla-servicios--fotos>.grilla-servicios__item:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--pri);border-color:var(--pri)}
.grilla-servicios--fotos>.grilla-servicios__item:focus-within{outline:3px solid var(--rojo);outline-offset:3px}
.grilla-servicios__foto{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;background:var(--fondo-2)}
.grilla-servicios__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.grilla-servicios--fotos>.grilla-servicios__item:hover .grilla-servicios__foto img{transform:scale(1.05)}
/* La foto se funde en blanco hacia el texto (abajo en escritorio, a la derecha en celular) */
.grilla-servicios__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 62%,#fff 100%);pointer-events:none}
/* Antetítulo sobre la foto (decorativo, el texto de la tarjeta no cambia): sale de la etiqueta del marcador [foto-g:…|alt|etiqueta] */
.grilla-servicios__foto[data-etiqueta]::before{content:attr(data-etiqueta);position:absolute;top:14px;right:14px;z-index:2;padding:6px 10px 5px;border-radius:999px;background:var(--pri);color:#fff;font:700 .6875rem/1 var(--f-titulos);letter-spacing:.1em;text-transform:uppercase}
.grilla-servicios__foto[data-etiqueta="Uso"]::before{background:#fff;color:var(--pri)}
.grilla-servicios--fotos .grilla-servicios__txt{padding:6px 20px 22px}
.grilla-servicios--fotos .grilla-servicios__txt>a:first-child{margin-bottom:6px}
.grilla-servicios--fotos .grilla-servicios__txt>a:first-child::before{content:"";position:absolute;inset:0;z-index:2;border-radius:16px}
.grilla-servicios--fotos .grilla-servicios__txt>a:first-child::after{position:relative;left:0;transition:left .2s ease}
.grilla-servicios--fotos>.grilla-servicios__item:hover .grilla-servicios__txt>a:first-child::after{left:4px}
.grilla-servicios--n7>.grilla-servicios__item:nth-child(n+4) .grilla-servicios__txt>a:first-child,.grilla-servicios--n4 .grilla-servicios__txt>a:first-child{font-size:calc(var(--fs-h3) * .86)}
/* Enlaces dentro de la descripción (p. ej. una segunda zona): por encima del enlace que cubre la tarjeta */
.grilla-servicios--fotos .grilla-servicios__desc a{position:relative;z-index:3}
.grilla-servicios--fotos .grilla-servicios__txt>a:focus-visible{outline:0}
/* Tablet (2 columnas): con 7 tarjetas la primera va a lo ancho, con la foto a la izquierda; con 4 quedan de a 2 */
@media (min-width:640px) and (max-width:999px){
  .grilla-servicios--n7>.grilla-servicios__item:first-child{grid-column:1/-1;flex-direction:row}
  .grilla-servicios--n7>.grilla-servicios__item:first-child .grilla-servicios__foto{flex:0 0 52%;aspect-ratio:auto;min-height:240px}
  .grilla-servicios--n7>.grilla-servicios__item:first-child .grilla-servicios__foto::after{background:linear-gradient(90deg,rgba(255,255,255,0) 55%,#fff 100%)}
  .grilla-servicios--n7>.grilla-servicios__item:first-child .grilla-servicios__txt{align-self:center;padding:24px 28px 24px 8px}
}
/* Celular: tarjeta horizontal, la foto a la izquierda y el degradé a blanco hacia el texto */
@media (max-width:639px){
  .grilla-servicios--fotos{gap:14px}
  .grilla-servicios--fotos>.grilla-servicios__item{flex-direction:row;box-shadow:4px 4px 0 #D3ECF2}
  .grilla-servicios__foto{flex:0 0 44%;aspect-ratio:auto;min-height:132px}
  .grilla-servicios__foto::after{background:linear-gradient(90deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.8) 76%,#fff 96%)}
  .grilla-servicios__foto::before{display:none}
  /* La foto va por debajo del texto (z-index -1 dentro de la tarjeta aislada) para que el texto la pise sin posicionarse: así el enlace
     que cubre la tarjeta se mide contra la tarjeta entera y la foto también es clickeable */
  .grilla-servicios--fotos>.grilla-servicios__item{isolation:isolate}
  .grilla-servicios--fotos .grilla-servicios__foto{z-index:-1}
  .grilla-servicios--fotos .grilla-servicios__txt{align-self:center;margin-left:-7%;padding:14px 16px 16px 0}
  .grilla-servicios--fotos .grilla-servicios__txt>a:first-child,.grilla-servicios--n7>.grilla-servicios__item:nth-child(n+4) .grilla-servicios__txt>a:first-child,.grilla-servicios--n4 .grilla-servicios__txt>a:first-child{font-size:1.0625rem}
}
@media (prefers-reduced-motion:reduce){.grilla-servicios__foto img,.grilla-servicios--fotos .grilla-servicios__txt>a:first-child::after{transition:none}.grilla-servicios--fotos>.grilla-servicios__item:hover .grilla-servicios__foto img{transform:none}}
/* Precios de la home en tarjetas ([TARJETAS-PRECIOS]): mismo sistema que Servicios y usos. Tarjeta blanca con pestaña turquesa,
   sombra recta y toda la tarjeta clickeable; el monto grande en Oswald; la destacada (pozo completo) en el color primario.
   Debajo, en escritorio, la nota y la calculadora a la izquierda y los botones a la derecha. */
.banda:has(.precios-tarjetas) .prosa{max-width:none}
.banda:has(.precios-tarjetas) .prosa>p{max-width:760px}
.precios-tarjetas{list-style:none;margin:28px 0 22px;padding:0;display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){.precios-tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.precios-tarjetas{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:22px}}
.prosa ul.precios-tarjetas>li.precio-card{padding-left:22px}
.prosa ul.precios-tarjetas>li.precio-card::before{content:none}
.precio-card{position:relative;display:flex;flex-direction:column;margin:0;padding:26px 22px 22px;background:#fff;border:1px solid #CFE6ED;border-radius:16px;box-shadow:5px 5px 0 #D3ECF2;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.precio-card::after{content:"";position:absolute;left:0;top:0;width:64px;height:5px;border-radius:0 0 3px 0;background:var(--rojo);transition:width .3s ease}
.precio-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--pri);border-color:var(--pri)}
.precio-card:hover::after{width:100%}
.precio-card:focus-within{outline:3px solid var(--rojo);outline-offset:3px}
.precio-card__titulo{display:block;font-family:var(--f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.125rem;line-height:1.2;color:var(--pri);text-decoration:none}
.precio-card__titulo::after{content:"\00a0\2192";position:relative;left:0;color:var(--rojo);font-family:var(--f);transition:left .2s ease}
.precio-card:hover .precio-card__titulo::after{left:4px}
a.precio-card__titulo::before{content:"";position:absolute;inset:0;z-index:1;border-radius:16px}
a.precio-card__titulo:focus-visible{outline:0}
.precio-card__monto{margin:18px 0 0;padding-bottom:16px;border-bottom:1px dashed #BFE0E8;line-height:1.1}
.precio-card__monto strong{display:block;font-family:var(--f-titulos);font-weight:700;font-size:clamp(1.75rem,1.4rem + 1vw,2.125rem);letter-spacing:.01em;color:var(--pri-2);white-space:nowrap}
.precio-card__monto span{display:block;margin-top:6px;font-size:var(--fs-sm);font-weight:600;color:var(--rojo-2)}
.precio-card__incluye{margin:14px 0 0;font-size:var(--fs-sm);line-height:1.55;color:var(--texto-2)}
.precio-card__incluye span{display:block;margin-bottom:4px;font-family:var(--f-titulos);font-weight:700;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pri)}
/* La destacada: fondo del color primario */
.precio-card--destacada{background:var(--pri);border-color:var(--pri);box-shadow:5px 5px 0 var(--rojo)}
.precio-card--destacada::after{background:var(--amarillo)}
.precio-card--destacada:hover{box-shadow:8px 8px 0 var(--pri-2);border-color:var(--pri-2)}
.precio-card--destacada .precio-card__titulo{color:#fff}
.precio-card--destacada .precio-card__titulo::after{color:var(--amarillo)}
.precio-card--destacada .precio-card__monto{border-bottom-color:rgba(255,255,255,.28)}
.precio-card--destacada .precio-card__monto strong{color:#fff}
.precio-card--destacada .precio-card__monto span,.precio-card--destacada .precio-card__incluye span{color:var(--amarillo)}
.precio-card--destacada .precio-card__incluye{color:rgba(255,255,255,.86)}
@media (min-width:1000px){.precio-card__monto strong{font-size:clamp(1.25rem,2.05vw,1.75rem)}}
/* Desde 2 columnas, título, monto e incluye comparten filas (subgrid): los precios quedan a la misma altura */
@media (min-width:640px){.precio-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}.precio-card__titulo{align-self:start}}
/* Escritorio: nota y calculadora a la izquierda, botones a la derecha */
@media (min-width:1000px){
  .banda:has(.precios-tarjetas) .prosa{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-auto-flow:row dense;column-gap:40px;align-items:center}
  .banda:has(.precios-tarjetas) .prosa>*{grid-column:1/-1}
  .banda:has(.precios-tarjetas) .prosa>.tabla-nota+p{grid-column:1}
  .banda:has(.precios-tarjetas) .prosa>.tabla-nota+p{margin:0}
  .banda:has(.precios-tarjetas) .prosa>.cta-inline{grid-column:2;margin:0}
}
@media (prefers-reduced-motion:reduce){.precio-card,.precio-card::after,.precio-card__titulo::after{transition:none}.precio-card:hover{transform:none}}
/* Cómo trabajamos (home y cualquier sección con ese H2): la lista numerada en tarjetas del mismo sistema (pestaña turquesa por fondo,
   sombra recta, número grande en Oswald) unidas por flechas; en celular, una debajo de la otra con flecha hacia abajo. Texto sin cambios. */
.banda[aria-labelledby="como-trabajamos"]{background:var(--fondo-2)}
.banda[aria-labelledby="como-trabajamos"] .prosa{max-width:none}
.banda[aria-labelledby="como-trabajamos"] .prosa ol{display:grid;grid-template-columns:1fr;gap:30px;margin:28px 0 0}
@media (min-width:640px){.banda[aria-labelledby="como-trabajamos"] .prosa ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px}}
@media (min-width:1000px){.banda[aria-labelledby="como-trabajamos"] .prosa ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}}
.banda[aria-labelledby="como-trabajamos"] .prosa ol>li{position:relative;min-height:0;margin:0;padding:72px 22px 24px;border:1px solid #CFE6ED;border-radius:16px;box-shadow:5px 5px 0 #D3ECF2;
  background:linear-gradient(var(--rojo),var(--rojo)) 0 0/64px 5px no-repeat,#fff;line-height:1.55;color:var(--texto)}
.banda[aria-labelledby="como-trabajamos"] .prosa ol>li::before{left:22px;top:20px;font-size:2.5rem}
/* Flecha al paso siguiente */
.banda[aria-labelledby="como-trabajamos"] .prosa ol>li::after,.banda[aria-labelledby="como-trabajamos"] .prosa ol>li:last-child::after{content:"\2193";display:block;position:absolute;left:50%;top:auto;bottom:-30px;width:30px;height:30px;margin-left:-15px;background:none;color:var(--rojo);font-family:var(--f);font-size:1.5rem;line-height:30px;text-align:center}
.banda[aria-labelledby="como-trabajamos"] .prosa ol>li:last-child::after{display:none}
@media (min-width:640px){
  .banda[aria-labelledby="como-trabajamos"] .prosa ol>li::after{content:"\2192";left:auto;right:-35px;top:28px;bottom:auto;margin:0}
  .banda[aria-labelledby="como-trabajamos"] .prosa ol>li:nth-child(2n)::after{display:none}
}
@media (min-width:1000px){.banda[aria-labelledby="como-trabajamos"] .prosa ol>li:nth-child(2n):not(:last-child)::after{display:block}}

/* Qué dice la ley (home): el párrafo en una tarjeta con un panel del color primario a la izquierda y la balanza (ícono de Font Awesome, máscara) */
.banda[aria-labelledby="que-dice-la-ley"] .prosa{max-width:none}
.banda[aria-labelledby="que-dice-la-ley"] .prosa>p{position:relative;margin:26px 0 0;padding:30px 34px 30px 214px;min-height:160px;display:flex;align-items:center;background:#fff;border:1px solid #CFE6ED;border-radius:16px;box-shadow:5px 5px 0 #D3ECF2;overflow:hidden;font-size:var(--fs-lg);line-height:1.6}
.banda[aria-labelledby="que-dice-la-ley"] .prosa>p{display:block}
.banda[aria-labelledby="que-dice-la-ley"] .prosa>p::before{content:"";position:absolute;left:0;top:0;bottom:0;width:176px;background:linear-gradient(var(--rojo),var(--rojo)) 0 0/64px 5px no-repeat,radial-gradient(circle,rgba(255,255,255,.12) 1.3px,transparent 1.6px) 0 0/16px 16px,var(--pri)}
.banda[aria-labelledby="que-dice-la-ley"] .prosa>p::after{content:"";position:absolute;left:52px;top:50%;width:72px;height:72px;margin-top:-36px;background:var(--amarillo);-webkit-mask:url(../images/fa/balanza.svg) center/contain no-repeat;mask:url(../images/fa/balanza.svg) center/contain no-repeat}
@media (max-width:639px){
  .banda[aria-labelledby="que-dice-la-ley"] .prosa>p{padding:100px 20px 22px;min-height:0;font-size:var(--fs-base)}
  .banda[aria-labelledby="que-dice-la-ley"] .prosa>p::before{right:0;bottom:auto;width:auto;height:76px}
  .banda[aria-labelledby="que-dice-la-ley"] .prosa>p::after{left:20px;top:14px;width:48px;height:48px;margin-top:0}
}
/* Celular: el número a la izquierda del texto, así cada paso ocupa menos alto */
@media (max-width:639px){
  .banda[aria-labelledby="como-trabajamos"] .prosa ol>li{padding:20px 18px 20px 78px}
  .banda[aria-labelledby="como-trabajamos"] .prosa ol>li::before{left:18px;top:18px;font-size:2.125rem}
}
/* Preguntas frecuentes (todo el sitio): cada pregunta es una tarjeta del mismo sistema (borde celeste, sombra recta sin desenfoque);
   pregunta en Oswald, botón redondo turquesa que gira a ×, y abierta lleva pestaña turquesa y sombra del color primario.
   En la home, en escritorio, el título va a la izquierda y las preguntas a la derecha. */
.faq__item{margin:0 0 14px;border:1px solid #CFE6ED;border-radius:16px;background:#fff;box-shadow:5px 5px 0 #D3ECF2;transition:border-color .2s ease,box-shadow .2s ease}
.faq__item:hover{border-color:var(--pri)}
.faq__item[open]{border-color:var(--pri);box-shadow:6px 6px 0 var(--pri);background:linear-gradient(var(--rojo),var(--rojo)) 0 0/64px 5px no-repeat,#fff}
.faq__q{padding:20px 22px;gap:20px;font-family:var(--f-titulos);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.125rem;line-height:1.25;color:var(--pri)}
.faq__q:hover{color:var(--pri-2)}
.faq__q:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:14px}
.faq__icono,.faq__item[open] .faq__icono{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--rojo);color:var(--pri-2);font-family:var(--f);font-size:1.375rem;font-weight:700;line-height:1;transition:transform .25s ease,background-color .2s ease,color .2s ease}
.faq__item[open] .faq__icono{transform:rotate(45deg);background:var(--pri);color:#fff}
.faq__a{margin:0 22px;padding:16px 0 20px;border-top:1px dashed #BFE0E8;color:var(--texto-2);line-height:1.65}
@media (max-width:639px){.faq__q{padding:16px 16px;font-size:1rem}.faq__a{margin:0 16px}.faq__icono,.faq__item[open] .faq__icono{width:30px;height:30px;font-size:1.25rem}}
@media (prefers-reduced-motion:reduce){.faq__item,.faq__icono{transition:none}}
@media (min-width:1000px){
  .hero--home~.cuerpo .banda[aria-labelledby="preguntas-frecuentes"] .prosa{max-width:none;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:64px;align-items:start}
  .hero--home~.cuerpo .banda[aria-labelledby="preguntas-frecuentes"] .prosa>h2{grid-column:1;grid-row:1 / span 12;margin-top:0;position:sticky;top:110px}
  .hero--home~.cuerpo .banda[aria-labelledby="preguntas-frecuentes"] .prosa>.faq__item{grid-column:2}
}
/* Páginas internas (vale para todo el sitio): tablas, notas, botones de WhatsApp, calculadora, formulario, fotos y tarjetas con ícono
   en el mismo sistema de la home: borde celeste, radio 16, pestaña o borde turquesa arriba y sombra recta sin desenfoque. */
.tabla-wrap{margin:1.6em 0;border:1px solid #CFE6ED;border-radius:16px;box-shadow:5px 5px 0 #D3ECF2;background:#fff}
th{padding:14px 16px}
td{padding:13px 16px}
tbody tr:nth-child(even){background:var(--fondo-2)}
td:first-child{color:var(--pri)}
.nota{background:var(--nota);border:1px solid #CFE6ED;border-left:5px solid var(--rojo);border-radius:16px;padding:16px 20px}
.cta-inline{padding:22px 24px;border:1px solid #CFE6ED;border-top:5px solid var(--rojo);border-radius:16px;box-shadow:5px 5px 0 #D3ECF2}
@media (max-width:719px){.cta-inline .btn{width:100%;justify-content:center}}
.calc,.form-card{border:1px solid #CFE6ED;border-top:5px solid var(--rojo);border-radius:16px;box-shadow:5px 5px 0 #D3ECF2}
.foto img{border-radius:16px;box-shadow:8px 8px 0 #D3ECF2}
/* Tarjetas con ícono (hub de guías): pestaña arriba, sombra recta y toda la tarjeta clickeable */
.grilla-servicios__item{border-color:#CFE6ED;border-radius:16px;box-shadow:5px 5px 0 #D3ECF2}
.grilla-servicios__item::after{top:0;bottom:auto;width:64px;height:5px;border-radius:0 0 3px 0}
.grilla-servicios__item:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--pri);border-color:var(--pri)}
.grilla-servicios__item:focus-within{outline:3px solid var(--rojo);outline-offset:3px}
.grilla-servicios__txt>a:first-child::before{content:"";position:absolute;inset:0;z-index:1;border-radius:16px}
.grilla-servicios__txt>a:focus-visible{outline:0}
.grilla-servicios__desc a{position:relative;z-index:3}
/* Texto que sigue a una grilla de tarjetas: aire arriba (la sombra recta ocupa lugar) */
.grilla-servicios+p,.precios-tarjetas+p{margin-top:30px}