@font-face{font-family:Titulos;src:url(fonts/Outfit.woff2) format('woff2');font-weight:1 1000;font-display:swap}@font-face{font-family:Texto;src:url(fonts/PlusJakartaSans.woff2) format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Texto;src:url(fonts/PlusJakartaSans.woff2) format('woff2');font-weight:500;font-display:swap}@font-face{font-family:Texto;src:url(fonts/PlusJakartaSans.woff2) format('woff2');font-weight:700;font-display:swap}
:root{--tinta:#035259;--acento:#a8520d;--claro:#f1ece8;--suave:#476363;--linea:#e3d6c8;--pagina:#fcf8f2}
/* Plantilla básica. Celular primero. Los seis colores del negocio llegan en :root desde el sitio.json (plantilla.js →
   estilos); los demás tonos salen de ellos. Los únicos fijos son el blanco y el verde de WhatsApp y de «abierto». */
:root{--blanco:#fff;--whatsapp:#0b7a52;--abierto:var(--whatsapp);--superficie:color-mix(in srgb,var(--pagina) 35%,var(--blanco));--acento-hondo:color-mix(in srgb,var(--acento) 78%,var(--tinta));--acento-suave:color-mix(in srgb,var(--acento) 14%,var(--blanco));--sombra:0 22px 48px -28px color-mix(in srgb,var(--tinta) 50%,transparent);--alto-nav:68px;--alto-fijos:77px}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* La barra fija del celular mide --alto-fijos: 12 + 52 + 12 de relleno y botón, y 1 de borde */
body{margin:0;padding-bottom:calc(var(--alto-fijos) + env(safe-area-inset-bottom));background:var(--pagina);color:var(--tinta);font:400 1rem/1.6 Texto,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:Titulos,Texto,system-ui,sans-serif;font-weight:700;margin:0;letter-spacing:-.015em;text-wrap:balance}
h1 span,h2 span{display:inline-block;color:var(--acento)}
p{margin:0;text-wrap:pretty}
[id]{scroll-margin-top:calc(var(--alto-nav) + 12px)}
.simbolos{position:absolute;width:0;height:0;overflow:hidden}
.icono{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icono-chico{width:14px;height:14px}
.envoltura{position:relative;width:100%;max-width:1160px;margin:0 auto;padding-inline:20px}
.saltar{position:absolute;left:12px;top:-60px;z-index:40;padding:10px 16px;border-radius:10px;background:var(--tinta);color:var(--blanco);text-decoration:none}
.saltar:focus{top:12px}

/* Decoración: manchas detrás del contenido y huellas encima, sin recibir clics */
/* Huellas: unas pisan la esquina de una foto o de una caja, otras muerden la orilla entre dos secciones y otras van en un
   hueco sin texto. Ninguna se corta ni tapa texto (basica.browser.js); la que no tiene hueco en un ancho no se ve. */
.huellas{position:absolute;inset:0;z-index:2;pointer-events:none;color:var(--acento);opacity:.22}
.huellas svg{display:none;position:absolute;width:28px;height:auto}
.huellas-foto,.huellas-servicio{opacity:.8;color:var(--blanco)}
.huellas-foto svg,.huellas-servicio svg{filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--tinta) 35%,transparent))}
.huellas-foto svg{display:block}
.portada-foto .huellas-foto svg{width:28px}
.portada-foto .huellas-foto svg:nth-child(1){left:calc(6% - 12px);bottom:calc(4% - 10px);rotate:-18deg}
.portada-foto .huellas-foto svg:nth-child(2){left:calc(6% + 22px);bottom:calc(4% + 30px);rotate:-6deg}
.razones-foto .huellas-foto svg{width:26px}
.razones-foto .huellas-foto svg:nth-child(1){right:calc(5% - 10px);top:calc(5% - 12px);rotate:16deg}
.razones-foto .huellas-foto svg:nth-child(2){right:calc(5% + 26px);top:calc(5% + 6px);rotate:4deg}
.servicio:nth-child(2) .huellas-servicio svg{display:block}
.huellas-servicio svg{width:20px}
.huellas-servicio svg:nth-child(1){right:14px;top:12px;rotate:14deg}
.huellas-servicio svg:nth-child(2){right:44px;top:38px;rotate:2deg}
.huellas-portada svg:nth-child(-n+2){width:26px}
/* El trío de la portada va debajo del contenido y más tenue: en el margen izquierdo cuando lo hay (1240 px o más) y, si
   no, detrás del texto sin quitarle contraste. */
.portada{isolation:isolate}
.huellas-fondo{z-index:-1;opacity:.1}
.huellas-fondo svg{display:block;width:24px}
.huellas-fondo svg:nth-child(1){left:14px;top:38%;rotate:-20deg}
.huellas-fondo svg:nth-child(2){left:42px;top:calc(38% + 50px);rotate:-6deg}
.huellas-fondo svg:nth-child(3){left:16px;top:calc(38% + 92px);rotate:-26deg}
.huellas-portada svg:nth-child(1){display:block;right:14%;bottom:-10px;rotate:12deg}
.huellas-portada svg:nth-child(2){display:block;right:calc(14% + 40px);bottom:18px;rotate:4deg}
.huellas-razones svg:nth-child(1){display:block;width:36px;left:10%;top:-12px;rotate:-14deg}
.huellas-razones svg:nth-child(n+2){width:24px}
.huellas-razones svg:nth-child(2){display:block;right:12%;bottom:18px;rotate:10deg}
.huellas-razones svg:nth-child(3){display:block;right:calc(12% + 32px);bottom:30px;rotate:-6deg}
.huellas-horario svg:nth-child(1){display:block;width:32px;right:22px;top:-26px;rotate:20deg}
.huellas-mapa svg{width:24px}
.huellas-mapa svg:nth-child(1){display:block;left:-8px;top:-16px;rotate:-16deg}
.huellas-mapa svg:nth-child(2){display:block;left:26px;top:-28px;rotate:-4deg}
.llamada .huellas{opacity:1;color:color-mix(in srgb,var(--blanco) 26%,var(--acento))}
.huellas-llamada svg:nth-child(1){display:block;width:30px;left:10%;top:-24px;rotate:-14deg;color:color-mix(in srgb,var(--acento) 40%,var(--blanco))}
.huellas-llamada svg:nth-child(n+2){width:17px}
.huellas-llamada svg:nth-child(2){display:block;right:18px;top:12px;rotate:8deg}
.huellas-llamada svg:nth-child(3){display:block;right:42px;top:22px;rotate:-4deg}
.huellas-llamada svg:nth-child(4){display:block;right:70px;top:10px;rotate:10deg}
.mancha{position:absolute;pointer-events:none;color:var(--acento-suave)}

/* Navegación */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--pagina) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.nav-dentro{display:flex;align-items:center;gap:24px;min-height:var(--alto-nav)}
.marca{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.marca img{width:auto;height:40px;mix-blend-mode:multiply}
.marca-solo-logo img{height:48px}
.marca-nombre{display:flex;flex-direction:column;min-width:0;font:700 1.08rem/1.15 Titulos,Texto,sans-serif}
.marca-nombre small{font:700 .66rem/1.4 Texto,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{display:none}
.nav .boton-nav{display:none}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:999px;background:var(--acento);color:var(--blanco);font-weight:700;text-decoration:none;transition:background-color .2s}
.boton:hover{background:var(--acento-hondo)}
.boton-whatsapp{background:var(--whatsapp)}
.boton-whatsapp:hover{background:color-mix(in srgb,var(--whatsapp) 80%,var(--tinta))}
.boton-blanco{background:var(--blanco);color:var(--acento-hondo)}
.boton-blanco:hover{background:var(--claro)}

/* Portada */
.portada{position:relative;overflow-x:clip;padding-block:36px 48px;background:linear-gradient(180deg,var(--pagina),color-mix(in srgb,var(--claro) 70%,var(--pagina)))}
.portada-dentro{display:grid;gap:40px}
.antetitulo{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acento-hondo)}
.portada h1{margin-top:14px;font-size:clamp(1.85rem,7.4vw,3.1rem);line-height:1.08}
.entrada{margin-top:16px;max-width:36em;font-size:1.06rem;color:var(--suave)}
.portada .entrada{font-size:1.12rem}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.resenas{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--linea);padding-bottom:4px}
.resenas .icono:first-child{color:var(--acento);fill:currentColor;stroke:none}
.resenas:hover{border-color:var(--acento)}
.portada-foto{position:relative;padding:6% 4% 4% 6%}
.mancha-portada{inset:-6% -10% -8% -6%;width:116%;height:118%;rotate:-12deg}
.franja{position:relative;display:grid;gap:4px;margin:44px 0 0;padding:10px;list-style:none;border:1px solid var(--linea);border-radius:22px;background:var(--blanco);box-shadow:var(--sombra)}
.franja li>a,.franja li:not(:has(a)){display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;text-decoration:none}
.franja li>a:hover{background:var(--claro)}
.franja .icono{width:42px;height:42px;padding:11px;border-radius:50%;background:var(--claro);color:var(--acento)}
.franja small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.franja strong{display:block;font-weight:600;line-height:1.3}

/* Fotos en su marco */
.marco{position:relative;margin:0;padding:8px;border-radius:26px;background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--sombra)}
.marco img{width:100%;height:100%;object-fit:cover;border-radius:19px}
.marco-portada{aspect-ratio:4/3;rotate:1.5deg}
.marco-portada img{object-position:50% 25%}
/* La foto del lugar va entera, en su proporción: un letrero o una fachada no se recortan */
.marco-lugar img{height:auto}

/* Secciones */
.seccion{padding-block:64px}
.encabezado{max-width:680px}
.encabezado h2,.mapa-texto h2{margin-top:12px;font-size:clamp(1.8rem,5.5vw,2.6rem);line-height:1.12}
.nota{margin-top:20px;font-size:.88rem;color:var(--suave)}

.servicios{display:grid;gap:18px;margin-top:36px}
.servicio{display:flex;flex-direction:column;border:1px solid var(--linea);border-radius:22px;background:var(--superficie);overflow:hidden;transition:border-color .2s}
.servicio:hover{border-color:color-mix(in srgb,var(--acento) 40%,var(--linea))}
.servicio-foto{position:relative}
.marco-servicio{aspect-ratio:4/3;padding:0;border:0;border-radius:0;box-shadow:none;background:var(--claro)}
.marco-servicio img{border-radius:0}
.servicio-icono{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--acento);color:var(--blanco);border:4px solid var(--superficie)}
.servicio-icono .icono{width:22px;height:22px}
.servicio-foto .servicio-icono{position:absolute;left:20px;bottom:-26px}
.servicio-sin-foto .servicio-icono{margin:22px 0 0 22px}
.servicio-texto{display:flex;flex-direction:column;gap:10px;padding:24px;flex:1}
.servicio-foto+.servicio-texto{padding-top:38px}
.etiqueta{align-self:flex-start;padding:5px 10px;border-radius:999px;background:var(--claro);color:var(--acento-hondo);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.servicio h3{font-size:1.28rem;line-height:1.2}
.servicio p{color:var(--suave)}
.servicio ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:.93rem}
.servicio li{display:flex;gap:10px}
.servicio li:before{content:"";flex:none;width:7px;height:7px;margin-top:.62em;border-radius:50%;background:var(--acento)}
.servicio-datos{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-top:auto;padding-top:14px;border-top:1px solid var(--linea)}
.servicio-datos strong{color:var(--tinta);font-size:1.05rem}

/* Por qué elegirnos */
.seccion-razones{position:relative;overflow-x:clip;background:color-mix(in srgb,var(--claro) 75%,var(--pagina))}
.razones{display:grid;gap:40px;align-items:center}
.razones-foto{position:relative;padding:5%}
.mancha-razones{inset:-4%;width:108%;height:108%;rotate:20deg;color:color-mix(in srgb,var(--acento) 22%,var(--blanco))}
.marco-razones{aspect-ratio:4/3;rotate:-1.5deg}
.razones-lista{display:grid;gap:14px;margin:32px 0 0;padding:0;list-style:none}
.razones-lista li{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:20px;background:var(--blanco);border:1px solid var(--linea)}
.razon-icono{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:var(--acento-suave);color:var(--acento-hondo)}
.razon-icono .icono{width:24px;height:24px}
.razones-lista h3{font-size:1.08rem;line-height:1.3}
.razones-lista p{margin-top:4px;font-size:.95rem;color:var(--suave)}

/* Horario: un renglón por día; el de hoy, marcado */
.horario-caja{position:relative;display:grid;gap:28px;padding:28px 20px;border-radius:28px;background:var(--claro)}
.estado{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:8px 14px;border-radius:999px;background:var(--blanco);color:var(--suave);font-weight:600;font-size:.95rem}
.estado:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--suave)}
.estado.abierto{color:var(--abierto)}
/* Cada parte del estado («Abierto ahora», «cierra a las 13:30») baja entera de renglón; app.js las separa */
[data-estado]>span>span,[data-estado-corto]>span>span{display:inline-block}
.estado.abierto:before{background:var(--abierto);box-shadow:0 0 0 4px color-mix(in srgb,var(--abierto) 20%,transparent)}
.semana{position:relative;padding:10px 12px;border-radius:20px;background:var(--blanco);border:1px solid var(--linea)}
.dias{margin:0;padding:0;list-style:none}
.dias li{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;padding:14px 12px}
.dias li+li{border-top:1px solid var(--linea)}
.dia{font-weight:600}
.horas{display:flex;flex-direction:column;align-items:flex-end;font:600 .98rem/1.35 Titulos,Texto,sans-serif;font-variant-numeric:tabular-nums}
.dias .cerrado .dia,.dias .cerrado .horas{color:var(--suave);font-weight:500}
.dias .hoy{background:var(--acento-suave);border-top-color:transparent;border-radius:14px}
.dias .hoy .horas{color:var(--acento-hondo)}
.dias .hoy+li{border-top-color:transparent}
.dias .hoy .dia:after{content:"Hoy";margin-left:10px;padding:2px 8px;border-radius:999px;background:var(--acento);color:var(--blanco);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:2px}

/* Mapa: el mapa en un marco con forma y una tarjeta encima */
.mapa{display:grid;gap:32px;align-items:center}
address{display:flex;gap:12px;font-style:normal;color:var(--suave)}
address .icono{color:var(--acento);margin-top:4px}
address strong{display:block;font:700 1.2rem/1.25 Titulos,Texto,sans-serif;color:var(--tinta);margin-bottom:4px}
.mapa-texto address{margin-top:24px}
.mapa-escena{position:relative;margin-top:32px}
.mapa-marco{height:340px;overflow:hidden;border:8px solid var(--blanco);border-radius:36px 36px 36px 96px;background:var(--claro);box-shadow:var(--sombra)}
.mapa-marco iframe{display:block;width:100%;height:100%;border:0}
.mapa-tarjeta{position:relative;margin:-72px 14px 0;padding:12px;border-radius:24px;background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--sombra)}
.marco-tarjeta{aspect-ratio:16/9;padding:0;border:0;box-shadow:none;border-radius:16px}
.marco-tarjeta img{border-radius:16px;object-position:50% 20%}
.mapa-tarjeta-texto{display:grid;gap:16px;padding:16px 8px 6px}
.mapa-tarjeta .boton{justify-self:start}

.canales{display:grid;gap:12px;margin-top:28px}
.canal{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--linea);border-radius:18px;background:var(--superficie);text-decoration:none;color:var(--suave);transition:border-color .2s}
.canal:hover{border-color:var(--acento)}
.canal>.icono{width:46px;height:46px;padding:12px;border-radius:50%;background:var(--claro);color:var(--acento)}
.canal strong{display:block;color:var(--tinta)}

/* Banda final para llamar */
.llamada{position:relative;display:grid;gap:32px;align-items:center;padding:40px 24px;border-radius:32px;background:var(--acento);color:var(--blanco)}
/* En el celular la banda va centrada, con los botones del mismo ancho; desde 900 px, a la izquierda junto a la foto */
.llamada-texto{position:relative;text-align:center}
.llamada .antetitulo{color:color-mix(in srgb,var(--blanco) 80%,var(--acento))}
.llamada h2{margin-top:12px;font-size:clamp(1.8rem,5.5vw,2.6rem);line-height:1.12}
.llamada h2 span{color:color-mix(in srgb,var(--blanco) 72%,var(--acento))}
.llamada .entrada{color:color-mix(in srgb,var(--blanco) 88%,var(--acento))}
.llamada-numero{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;font:700 1.6rem/1.2 Titulos,Texto,sans-serif}
.llamada-numero a{text-decoration:none}
.llamada-numero .icono{width:28px;height:28px}
.marco-llamada{aspect-ratio:4/3;rotate:2deg;border-color:transparent}
/* Sobre el azul de la banda, WhatsApp va con contorno blanco: el verde junto al acento choca */
.llamada .acciones{justify-content:center}
.llamada .acciones .boton{flex:1 1 200px}
.llamada .boton-whatsapp{background:transparent;color:var(--blanco);box-shadow:inset 0 0 0 2px var(--blanco)}
.llamada .boton-whatsapp:hover{background:color-mix(in srgb,var(--blanco) 14%,transparent)}

/* Pie */
.pie{margin-top:24px;padding-block:40px 28px;border-top:1px solid var(--linea);background:var(--superficie)}
/* Pie: centrado en el celular; desde 900 px, la marca a la izquierda, el contacto al centro y las redes a la derecha */
.pie-arriba{display:grid;gap:28px;text-align:center}
.pie .marca{justify-content:center}
.pie-marca p{margin:14px auto 0;color:var(--suave);max-width:28em}
.pie-titulo{margin-bottom:12px;font:700 .75rem/1.4 Texto,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--acento-hondo)}
.pie-bloque p{margin-top:6px;color:var(--suave)}
.pie-telefono{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none}
.pie-telefono .icono{color:var(--acento)}
.redes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.redes a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--linea);border-radius:50%;background:var(--blanco)}
.pie-abajo{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;gap:8px 24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--linea);font-size:.85rem;color:var(--suave)}

/* Botones fijos: abajo a lo ancho en el celular */
.fijos{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--pagina) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--linea)}
.fijo{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:14px;background:var(--acento);color:var(--blanco);font-weight:700;text-decoration:none}
.fijo-whatsapp{background:var(--whatsapp)}

/* Aparición suave al bajar: la clase aparecer la pone app.js; con «menos movimiento» nada se esconde */
@media(prefers-reduced-motion:no-preference){
  .aparecer .aparece{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .aparecer .aparece.visible{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

@media(min-width:640px){
  .envoltura{padding-inline:28px}
  .franja{grid-template-columns:repeat(3,1fr)}
  .servicios{grid-template-columns:repeat(2,1fr)}
  .razones-lista{grid-template-columns:repeat(2,1fr)}
  .canales{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .horario-caja{padding:40px}
  .dias li{padding-inline:18px}
  .horas{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:0 20px}
  .mapa-marco{height:420px}
  .llamada{padding:56px 48px}
  .pie-arriba{grid-template-columns:1fr 1fr}
  .pie-marca{grid-column:1/-1}
}
@media(min-width:900px){
  body{padding-bottom:0}
  .menu{display:flex;gap:28px;margin-left:auto}
  .menu a{text-decoration:none;font-weight:500;font-size:.95rem}
  .menu a:hover{color:var(--acento)}
  .nav .boton-nav{display:inline-flex;min-height:44px;padding:10px 20px}
  .nav-dentro>.boton-nav:nth-child(2){margin-left:auto}
  .portada{padding-block:56px 64px}
  .portada-con-foto{grid-template-columns:1.2fr 1fr;align-items:center;gap:48px}
  .portada h1{font-size:clamp(2.6rem,3.9vw,3.1rem)}
  .seccion{padding-block:96px}
  .servicios{grid-template-columns:repeat(3,1fr);gap:22px}
  .razones-con-foto{grid-template-columns:.7fr 1.3fr;gap:56px}
  .horario-caja{grid-template-columns:.8fr 1.2fr;gap:48px;padding:56px;align-items:center}
  .mapa-con-foto{grid-template-columns:1fr 1fr;gap:64px}
  /* La tarjeta va a la derecha: a la izquierda, arriba, Google pone el nombre del lugar */
  .mapa-marco{height:480px;margin-right:120px}
  .mapa-tarjeta{position:absolute;right:0;top:40px;width:360px;margin:0}
  .llamada-con-foto{grid-template-columns:1.2fr .8fr;gap:48px}
  .portada-foto .huellas-foto svg{width:34px}
  .portada-foto .huellas-foto svg:nth-child(2){left:calc(6% + 28px);bottom:calc(4% + 38px)}
  .huellas-horario svg:nth-child(n+2){width:22px}
  .huellas-horario svg:nth-child(2){display:block;left:56px;bottom:20px;rotate:-12deg}
  .huellas-horario svg:nth-child(3){display:block;left:88px;bottom:38px;rotate:6deg}
  .huellas-horario svg:nth-child(4){display:block;left:122px;bottom:18px;rotate:-4deg}
  .huellas-llamada svg:nth-child(n+2){width:22px}
  .huellas-llamada svg:nth-child(2){right:auto;left:46%;top:16px}
  .huellas-llamada svg:nth-child(3){right:auto;left:calc(46% + 32px);top:34px}
  .huellas-llamada svg:nth-child(4){right:auto;left:calc(46% - 32px);top:40px}
  .pie-arriba{grid-template-columns:1.6fr 1fr 1fr;gap:48px;text-align:left}
  .pie-marca{grid-column:auto}
  .pie .marca{justify-content:flex-start}
  .pie-marca p{margin-inline:0}
  .pie-contacto{text-align:center}
  .pie-redes{text-align:right}
  .pie-redes .redes{justify-content:flex-end}
  .pie-abajo{justify-content:space-between;text-align:left}
  .llamada-texto{text-align:left}
  .llamada-numero,.llamada .acciones{justify-content:flex-start}
  .llamada .acciones .boton{flex:none}
  /* En pantallas anchas los botones fijos flotan lado a lado, abajo a la derecha */
  .fijos{left:auto;right:24px;bottom:24px;flex-direction:row;padding:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .fijo{flex:none;min-height:52px;padding:0 22px;border-radius:999px;box-shadow:var(--sombra)}
}
/* Desde 1240 px, el margen a los lados de la portada (lo que sobra de la envoltura) alcanza para una huella a la izquierda */
@media(min-width:1240px){.huellas-fondo{opacity:.22}}

/* Realce: grano suave en los fondos de color, degradados de la marca, el resalte de la portada como trazo de marcador,
   una raya antes de cada antetítulo, puntos detrás de la foto de portada y en la banda, y las tarjetas que se alzan. */
.portada{background:url(assets/grano.svg),radial-gradient(60% 70% at 85% 30%,color-mix(in srgb,var(--acento) 12%,transparent),transparent 70%),linear-gradient(180deg,var(--pagina),color-mix(in srgb,var(--claro) 70%,var(--pagina)))}
.seccion-razones{background:url(assets/grano.svg),linear-gradient(160deg,color-mix(in srgb,var(--claro) 85%,var(--pagina)),color-mix(in srgb,var(--claro) 55%,var(--pagina)))}
.horario-caja{background:url(assets/grano.svg),linear-gradient(135deg,var(--claro),color-mix(in srgb,var(--acento) 16%,var(--claro)))}
.llamada{background:url(assets/grano.svg),radial-gradient(80% 90% at 100% 0%,color-mix(in srgb,var(--acento) 70%,var(--blanco) 30%),transparent 60%),linear-gradient(150deg,var(--acento),var(--acento-hondo))}
.llamada:before{content:"";position:absolute;right:18px;bottom:18px;width:120px;height:84px;background:radial-gradient(circle,color-mix(in srgb,var(--blanco) 35%,transparent) 1.6px,transparent 2px) 0 0/14px 14px;pointer-events:none}
.portada-foto:before{content:"";position:absolute;left:0;top:0;width:44%;height:46%;background:radial-gradient(circle,color-mix(in srgb,var(--acento) 45%,transparent) 1.6px,transparent 2px) 0 0/14px 14px;pointer-events:none}
.portada h1 span{padding-inline:.06em;background:linear-gradient(transparent 64%,color-mix(in srgb,var(--acento) 18%,transparent) 64% 92%,transparent 92%);border-radius:4px}
.antetitulo{display:inline-flex;align-items:center;gap:10px}
.antetitulo:before{content:"";flex:none;width:22px;height:2px;border-radius:2px;background:currentColor}
.servicio{transition:border-color .2s,translate .25s,box-shadow .25s}
.servicio:hover{translate:0 -4px;box-shadow:var(--sombra)}