/* Taxi Santander 8 Plazas - hoja de estilos comun del sitio (base: portada C1, noche de mar). Orden: 1 variables, 2 base, 3 cabecera, 4 pie, 5 componentes, 6 portada, 7 secciones, 8 paginas interiores, 9 aviso de cookies, 10 movimiento reducido, 11 selector de idioma. */ /* 0. TIPOGRAFIAS ALOJADAS (SIL OFL 1.1, ver fonts/LICENCIA.txt) */ @font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/young-serif-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/young-serif-400-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:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/source-sans-3-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/source-sans-3-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:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/source-sans-3-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/source-sans-3-italic-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} /* 1. VARIABLES */ :root{ --cuerpo:"Source Sans 3",Seravek,"Gill Sans Nova",Calibri,sans-serif; --titulo:"Young Serif","Iowan Old Style",Georgia,serif; --mar:#0c1820;--mar2:#13242e;--mar3:#081117; --texto:#eef2f3;--texto2:#b7c5cc;--cielo:#7dbcf5;--linea:#2c4250;--hueco:#6f8795; --ancho:1240px; --margen:clamp(1.25rem,5vw,2.5rem); /* margen lateral */ --sec:clamp(3rem,7vw,5rem); /* espacio vertical entre secciones */ --alto-barra:calc(4.75rem + env(safe-area-inset-bottom)); /* barra movil fija */ } /* 2. BASE */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem} body{margin:0;background:var(--mar);color:var(--texto);font:400 1.0625rem/1.6 var(--cuerpo);padding-bottom:var(--alto-barra);overflow-wrap:break-word} img{display:block;max-width:100%;height:auto} figure{margin:0} a{color:var(--cielo);text-underline-offset:.2em} :focus-visible{outline:3px solid #fff;outline-offset:3px} .w{width:min(var(--ancho),calc(100% - 2*var(--margen)));margin-inline:auto} .salto{position:absolute;left:-999px;top:0;background:#fff;color:var(--mar);padding:.75rem 1rem;z-index:40} .salto:focus{left:0} h1,h2,h3{margin:0;font-family:var(--titulo);font-weight:400;letter-spacing:-.01em} h1{font-size:clamp(2.6rem,6.2vw,5rem);line-height:1.04;max-width:12ch;text-wrap:balance;hyphens:none} h2{font-size:clamp(1.875rem,4.5vw,3rem);line-height:1.08;margin-bottom:1.25rem;text-wrap:balance} h3{line-height:1.2} section{padding:var(--sec) 0} .nota{font-style:italic} figcaption{font-size:.9375rem;color:var(--texto2);margin-top:.35rem;padding-left:.1rem} /* fotos de contenido: sin esquinas redondeadas y bordes fundidos con el fondo (velo leve del color de la web) */ .vent-foto img,.dos img,.t img,.texto-foto img,.galeria img{border-radius:0; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 3.5%,#000 96.5%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 3.5%,#000 96.5%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0,#000 3.5%,#000 96.5%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 3.5%,#000 96.5%,transparent 100%); mask-composite:intersect} /* 3. CABECERA: siempre visible en movil (fija arriba); en ordenador va sobre la foto */ .cab{position:sticky;top:0;z-index:20;background:var(--mar);border-bottom:1px solid var(--linea)} .cab-fila{display:flex;align-items:center;gap:.5rem 1rem;padding:.6rem 0} .cab-logo{display:block;flex:0 0 auto} .cab-logo img{width:124px;height:auto} .cab-tel{margin-left:auto;background:var(--cielo);color:var(--mar);font-weight:700;font-size:1rem;line-height:1;text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;padding:0 1.1rem;border:2px solid var(--cielo);border-radius:2px;transition:background-color .15s,border-color .15s} .cab-tel:hover{background:#fff;border-color:#fff} @media(max-width:420px){.cab-logo img{width:108px}.cab-tel{padding:0 .8rem;font-size:.9375rem}.cab-fila{gap:.5rem}} @media(max-width:359px){.cab-logo img{width:86px}.cab-tel{padding:0 .5rem;font-size:.8125rem}.mbtn{padding:0 .5rem;font-size:.875rem}.cab-fila{gap:.35rem}} .mbtn{display:none;min-height:44px;padding:0 1rem;font:600 1rem var(--cuerpo);background:transparent;color:#fff;border:1.5px solid #fff;cursor:pointer} .mbtn:hover,.mbtn[aria-expanded="true"]{background:#fff;color:var(--mar)} .mbtn:active{opacity:.85} #nav ul{list-style:none;margin:0;padding:0 0 .5rem;display:flex;flex-wrap:wrap;gap:0 1.25rem} #nav a{display:flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;font-size:1rem;font-weight:600} #nav a:hover{text-decoration:underline} #nav a:active{color:var(--cielo)} @media(max-width:899px){ .js .mbtn{display:inline-flex;align-items:center} .js #nav ul{display:none;flex-direction:column;background:var(--mar);border:1px solid var(--linea);padding:.25rem 1rem;margin-bottom:.75rem;max-height:calc(100vh - 6rem);max-height:calc(100dvh - 6rem);overflow-y:auto} .js #nav.abierto ul{display:flex} } /* 4. PIE */ .pie{background:var(--mar3);color:var(--texto2);padding:3rem 0 1.5rem;border-top:1px solid var(--linea)} .pie h2{font:700 1rem/1.3 var(--cuerpo);letter-spacing:0;color:#fff;margin:0 0 .6rem} .pie ul{list-style:none;margin:0;padding:0} .pie a{color:var(--texto2);display:inline-flex;align-items:center;min-height:44px} .pie a[href^="mailto:"]{display:inline-block;max-width:100%;overflow-wrap:anywhere} .pie a:hover{color:#fff;text-decoration:underline} .pie p{margin:0 0 .4rem} .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem} @media(min-width:900px){.cols{grid-template-columns:repeat(4,1fr)}} .cookies{margin-top:2rem;border:1px dashed var(--hueco);padding:1rem;font-size:.9375rem} .pie .copy{margin-top:1.5rem;font-size:.875rem} /* 5. COMPONENTES */ .ico{flex:none;width:1.25em;height:1.25em} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;padding:0 1.5rem;font:700 1rem/1 var(--cuerpo);text-decoration:none;border:2px solid var(--cielo);border-radius:2px;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s} .btn-p{background:var(--cielo);color:var(--mar)} .btn-p:hover{background:#fff;border-color:#fff;color:var(--mar)} .btn-s{background:transparent;color:#fff;border-color:#fff} .btn-s:hover{background:#fff;color:var(--mar)} .btn:active{transform:translateY(1px);opacity:.9} .acciones{display:flex;flex-wrap:wrap;gap:.75rem} .hueco{border:1px dashed var(--hueco);padding:1.25rem;margin:0;color:var(--texto2);max-width:65ch} /* barra fija Llamar / WhatsApp (solo movil) */ .barra{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom));background:var(--mar);border-top:1px solid var(--cielo);z-index:10} @media(min-width:900px){.barra{display:none}body{padding-bottom:0}} /* 6. PORTADA Movil (<=700): las paginas interiores conservan foto 2:3; la portada usa el maestro horizontal completo y texto debajo. 700-1199: foto 16:9 entera y el texto debajo. >=1200: foto a casi toda la altura de la ventana y texto superpuesto en el tercio izquierdo. */ :root{--hh:max(43vw,min(100vh,56.25vw))} @supports(height:100svh){:root{--hh:max(43vw,min(100svh,56.25vw))}} .hero-img{aspect-ratio:2/3;position:relative;background:var(--mar2)} .hero-img picture{display:contents} .hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 50%)} .hero-img::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to bottom,rgba(12,24,32,0) 0,rgba(12,24,32,.85) 22%,rgba(12,24,32,.93) 50%,var(--mar) 100%)} .hero-txt{position:relative;z-index:1;margin-top:-45vw;padding-bottom:var(--sec)} .hero-txt:not(.hero-txt--pag) .acciones{display:inline-grid;grid-template-columns:minmax(0,max-content);max-width:100%;justify-self:start} .intro{font-size:1.25rem;max-width:36ch;margin:1rem 0 1.5rem} @media(min-width:701px){ .hero-img{aspect-ratio:16/9} .hero-img::after{height:12%;background:linear-gradient(to bottom,rgba(12,24,32,0),var(--mar))} .hero-txt{margin-top:-1.5rem} } @media(min-width:900px){ .hero-txt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4rem;align-items:end} .hero-txt h1{grid-column:1;grid-row:1/span 3;align-self:end;max-width:none} .hero-txt .intro,.hero-txt .acciones{grid-column:2} .hero-txt .intro{margin-top:0} } @media(min-width:1200px){ .hero-img{aspect-ratio:auto;height:var(--hh)} .hero-txt:is(:not(.hero-txt--pag),.hero-txt--sobre){display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end; width:25vw;height:var(--hh);margin:calc(-1*var(--hh)) 0 var(--sec) 3.5vw;padding:0 0 clamp(1.5rem,4vh,3rem)} .hero-txt:is(:not(.hero-txt--pag),.hero-txt--sobre)::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-3.5vw;width:39.5vw; background:linear-gradient(to right,rgba(8,17,23,.86) 0,rgba(8,17,23,.72) 72%,rgba(8,17,23,0) 100%)} .hero-txt h1{font-size:clamp(2.2rem,3.2vw,4rem)} .hero-txt .intro{font-size:clamp(1.05rem,1.2vw,1.35rem);margin:.9rem 0 1.25rem;color:var(--texto)} /* cabecera sobre la foto (solo hay cielo arriba) con velo suave */ .cab{position:absolute;left:0;right:0;top:0;background:linear-gradient(to bottom,rgba(8,17,23,.85) 0,rgba(8,17,23,.7) 65%,rgba(8,17,23,0) 100%);border-bottom:0} .cab-logo img{width:158px} .cab-fila{padding:.4rem 0} #nav ul{padding-bottom:0} } /* variante de pagina interior (banner tipo portada): .hero-img--int + cabecera con .hero-txt--pag. El texto va debajo de la foto; con .hero-txt--sobre pasa a ir superpuesto desde 1200 px (ver seccion 8). La cabecera del sitio sigue arriba (no sobre la foto), asi que la altura descuenta 7rem para que la foto entre entera en pantalla; --foco ancla el recorte vertical. */ body.int-hero{--hh:max(43vw,min(calc(100vh - 7rem),56.25vw))} @supports(height:100svh){body.int-hero{--hh:max(43vw,min(calc(100svh - 7rem),56.25vw))}} .hero-img--int::after{height:14%} @media(min-width:701px){.hero-img--int::after{height:4%}} .hero-txt--pag{margin-top:0;padding-bottom:0;display:block} /* 7. SECCIONES */ .sec-cont{padding-top:0} /* la seccion anterior ya deja el espacio */ /* ventajas: foto grande a un lado, texto en filas */ .vent-grid{display:grid;gap:2rem} .vent-foto img{width:100%;aspect-ratio:3/4;object-fit:cover} .it{border-top:1px solid var(--linea);padding:1.1rem 0 1.25rem} .vent h2{font-size:1.375rem;line-height:1.2;margin:0 0 .35rem} .vent p{margin:0;color:var(--texto2);max-width:56ch} .dos{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.5rem} .dos img{width:100%;aspect-ratio:3/4;object-fit:cover} @media(min-width:900px){ .vent-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4rem;align-items:start} .vent-foto{position:sticky;top:1.5rem} } /* llamada: el margen lateral va en la propia seccion para que el texto no quede pegado al borde del fondo */ .llamada{background:var(--mar2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:4.5rem 1.25rem} .llamada .w{width:100%;max-width:var(--ancho)} .llamada--foto .acciones .btn{min-width:13.5rem} @media(max-width:700px){ .llamada--sobre .acciones{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;width:min(100%,18rem)} .llamada--sobre .acciones .btn{width:100%;height:50px} } @media(min-width:900px){.llamada{padding:5rem 2.5rem}} .llamada p{font-size:1.25rem;margin:0 0 1.75rem;color:var(--texto2)} /* variante con foto (portada): a dos columnas desde 1000 px, foto a sangre a la derecha fundida con el fondo; en movil no se muestra */ .llamada-foto{display:none} @media(min-width:1000px){ .llamada--foto{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(24rem,26vw,32rem)} .llamada--foto .w{position:relative;z-index:1} .llamada--foto h2,.llamada--foto p{max-width:min(34rem,42vw)} .llamada--foto .llamada-foto{display:block;position:absolute;top:0;bottom:0;right:0;width:56%} .llamada--foto .llamada-foto img{width:100%;height:100%;object-fit:cover;object-position:75% 60%; -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.6) 18%,#000 42%); mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.6) 18%,#000 42%)} } /* servicios: texto a la izquierda y mosaico con ritmo a la derecha (desde 1000 px); texto debajo de cada foto */ .serv{display:grid;gap:2.5rem} .serv-intro{max-width:64ch;margin:0 0 1.5rem;color:var(--texto2)} .mosaico{display:grid;gap:2rem} .t img{width:100%;object-fit:cover} .t .im-1,.t .im-4{aspect-ratio:16/10} .t .im-2,.t .im-3{aspect-ratio:1/1} .t .im-1{object-position:48% 60%} .t .im-2{object-position:52% 50%} .t .im-3{object-position:62% 50%} .t .im-4{object-position:30% 50%} .t h3{font-size:clamp(1.2rem,1.6vw,1.5rem);margin:.75rem 0 .25rem} .t h3 a{color:#fff;text-decoration:none} .t h3 a:hover{text-decoration:underline;color:#fff} .t .reservar{display:inline-flex;align-items:center;min-height:44px;font-weight:700} .t .reservar:hover{color:#fff} @media(min-width:800px){ .mosaico{grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem 1.5rem;align-items:end} .t1{grid-column:1/9} .t2{grid-column:9/13} .t3{grid-column:1/6} .t4{grid-column:6/13} } @media(min-width:1000px){ .serv{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:4rem;align-items:start} .serv-txt{position:sticky;top:7.5rem} } /* opiniones: titular a un lado y el cuerpo al otro */ @media(min-width:1000px){ .op{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:4rem;align-items:start} .op h2{margin:0} .op .hueco{max-width:none} } /* 8. PAGINAS INTERIORES (body class="int") Plantilla: _plantilla.html. Componentes: migas, pag-cab (+ pag-foto), prosa, texto-foto, galeria, datos, vias, llamada, form, tabla, aviso. */ .int .cab{position:sticky;background:var(--mar);border-bottom:1px solid var(--linea)} /* en interiores la cabecera no va sobre la foto */ /* cabecera de pagina: variante con foto (.pag-foto antes de .pag-cab) o solo texto (legales) */ .pag-foto{position:relative;overflow:hidden;aspect-ratio:3/2;max-height:var(--max-alto,36rem);background:var(--mar2);--fade:25%} .pag-foto img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 45%)} /* la foto se funde con el fondo: por abajo siempre; por los lados, solo en pantallas anchas */ .pag-foto::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom,rgba(12,24,32,0) calc(100% - var(--fade)),rgba(12,24,32,.35) calc(100% - var(--fade)*.6),rgba(12,24,32,.78) calc(100% - var(--fade)*.25),var(--mar) 100%)} @media(min-width:700px){.pag-foto{aspect-ratio:21/8}} @media(min-width:1400px){.pag-foto::after{background: linear-gradient(to bottom,rgba(12,24,32,0) calc(100% - var(--fade)),rgba(12,24,32,.35) calc(100% - var(--fade)*.6),rgba(12,24,32,.78) calc(100% - var(--fade)*.25),var(--mar) 100%), linear-gradient(to right,var(--mar) 0,rgba(12,24,32,0) 5%,rgba(12,24,32,0) 95%,var(--mar) 100%)}} /* variante alta: furgoneta en la mitad inferior de la foto 4:3 (Cabarceno, Puerto Chico); foto entera en movil */ .pag-foto--alta{--max-alto:46rem;--fade:10%;aspect-ratio:4/3} @media(min-width:700px){.pag-foto--alta{aspect-ratio:2.2/1;--fade:15%}} /* variante movilidad reducida: foto 16:9 con la furgoneta a toda altura */ .pag-foto--mov{--max-alto:42rem;--fade:15%} @media(min-width:700px){.pag-foto--mov{aspect-ratio:2/1}} .pag-cab{padding:clamp(1.5rem,4vw,2.5rem) 0 0} .pag-cab h1{font-size:clamp(2.25rem,5vw,3.75rem);max-width:20ch} .pag-cab .intro{max-width:52ch;margin:1rem 0 0;color:var(--texto2)} .pag-cab + section{padding-top:clamp(2rem,5vw,3.5rem)} /* banner tipo portada con el texto superpuesto abajo a la izquierda (solo >= 1200 px; antes va debajo de la foto) */ @media(min-width:1200px){ .pag-cab--over{padding-top:0} .pag-cab .hero-txt--sobre h1{font-size:clamp(1.75rem,2.35vw,2.75rem);max-width:none} .pag-cab .hero-txt--sobre .intro{font-size:clamp(1rem,1.1vw,1.2rem);max-width:none;margin:.75rem 0 1.25rem;color:var(--texto)} .pag-cab .hero-txt--sobre::before{width:33vw; -webkit-mask-image:linear-gradient(to top,#000 0,#000 58%,transparent 92%);mask-image:linear-gradient(to top,#000 0,#000 58%,transparent 92%)} } /* migas de pan */ .migas{margin:0 0 1rem;font-size:.9375rem} .migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 .5rem} .migas li{display:flex;align-items:center;color:var(--texto2)} .migas li+li::before{content:"/";margin-right:.5rem;color:var(--hueco)} .migas a{display:inline-flex;align-items:center;min-height:44px} .migas [aria-current]{color:var(--texto)} /* prosa: ancho de lectura 45-75 caracteres */ .prosa{max-width:68ch} .prosa>:first-child{margin-top:0} .prosa h2{font-size:1.75rem;line-height:1.15;margin:2.5rem 0 .75rem} @media(min-width:900px){.prosa h2{font-size:2rem}} .prosa h3{font-size:1.375rem;line-height:1.2;margin:1.75rem 0 .5rem} .prosa p,.prosa ul,.prosa ol{margin:0 0 1rem} .prosa ul,.prosa ol{padding-left:1.4rem} .prosa li{margin-bottom:.4rem;padding-left:.2rem} .prosa li::marker{color:var(--cielo)} .prosa a:hover{color:#fff} .prosa strong{font-weight:700;color:#fff} /* texto + foto alternado (.texto-foto--inv invierte; .foto-v = foto vertical) */ .texto-foto{display:grid;gap:1.5rem} .texto-foto img{width:100%;aspect-ratio:4/3;object-fit:cover} .texto-foto .foto-v img{aspect-ratio:3/4} .texto-foto+.texto-foto{margin-top:clamp(2.5rem,6vw,4.5rem)} .texto-foto h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;margin:0 0 .75rem} .texto-foto h2 a{color:#fff;text-decoration:none} .texto-foto h2 a:hover{text-decoration:underline} .texto-foto p{margin:0 0 1rem;max-width:56ch} @media(min-width:900px){ .texto-foto{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:4rem;align-items:center} .texto-foto--inv>:first-child{order:2} .texto-foto .foto-v{max-width:26rem} } /* galeria de 2-3 fotos con pie */ .galeria{display:grid;gap:1rem .75rem;grid-template-columns:1fr 1fr} .galeria img{width:100%;aspect-ratio:4/3;object-fit:cover} .galeria .foto-v img{aspect-ratio:3/4} .galeria-3{grid-template-columns:1fr} @media(min-width:700px){.galeria-3{grid-template-columns:repeat(3,1fr)}} /* lista de datos (definiciones) */ .datos{margin:0;max-width:56rem} .datos>div{border-top:1px solid var(--linea);padding:1rem 0} .datos dt{font-weight:700;color:#fff} .datos dd{margin:.25rem 0 0;color:var(--texto2)} @media(min-width:700px){.datos>div{display:grid;grid-template-columns:14rem 1fr;gap:0 2rem}.datos dd{margin:0}} /* vias de contacto grandes: telefono y WhatsApp */ .vias{display:grid;gap:.75rem;margin-top:1.75rem} @media(min-width:700px){.vias{grid-template-columns:1fr 1fr;max-width:46rem}} .via{display:flex;align-items:center;justify-content:center;gap:.65rem;min-height:56px;padding:0 1.5rem;border:2px solid var(--cielo);border-radius:2px;color:#fff;text-decoration:none;font:700 1.125rem/1 var(--cuerpo);transition:background-color .15s,color .15s,border-color .15s} .dato-tel{margin:1.25rem 0 0;color:var(--texto2)} .dato-tel a{color:#fff;font-weight:700} .via-p{background:var(--cielo);color:var(--mar)} .via-p:hover{background:#fff;border-color:#fff} .via-s:hover{background:#fff;color:var(--mar)} .via:active{opacity:.9} /* formulario */ .form{display:grid;gap:1.25rem;max-width:46rem;color-scheme:dark} .form fieldset{border:0;margin:0;padding:0;display:grid;gap:1.25rem} .campos-2{display:grid;gap:1.25rem} @media(min-width:700px){.campos-2{grid-template-columns:1fr 1fr}} .campo label,.campo .etq{display:block;font-weight:600;margin-bottom:.4rem} .campo .op{font-weight:400;color:var(--texto2)} .form input[type=text],.form input[type=tel],.form input[type=email],.form input[type=number],.form input[type=date],.form input[type=time],.form select,.form textarea{display:block;width:100%;min-height:48px;padding:.6rem .85rem;font:400 1.0625rem/1.4 var(--cuerpo);color:var(--texto);background:var(--mar2);border:1.5px solid var(--hueco);border-radius:2px} .form textarea{min-height:8rem;resize:vertical} .form input:hover,.form select:hover,.form textarea:hover{border-color:var(--texto2)} .form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid #fff;outline-offset:2px;border-color:#fff} .form input:user-invalid,.form select:user-invalid,.form textarea:user-invalid,.campo.con-error input,.campo.con-error select,.campo.con-error textarea{border-color:#ffb4a8} .err{display:none;margin:.4rem 0 0;color:#ffb4a8;font-weight:600;font-size:.9375rem} .err::before{content:"Error: "} .campo.con-error .err,.campo:has(:user-invalid) .err{display:block} .form button[disabled],.form .btn[aria-disabled=true]{opacity:.5;cursor:not-allowed} .check{display:flex;gap:.75rem;align-items:flex-start;min-height:44px} .check input{flex:0 0 auto;width:1.5rem;height:1.5rem;margin:.6rem 0 0;accent-color:var(--cielo)} .check label{margin:0;padding:.5rem 0;font-weight:400} .form .btn{justify-self:start;min-width:12rem} .form-nota{margin:0;font-size:.9375rem;color:var(--texto2)} .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* campo antispam: oculto a personas */ /* tabla sencilla (cookies) */ .tabla-wrap{overflow-x:auto;max-width:100%} .tabla{width:100%;border-collapse:collapse;font-size:1rem;min-width:34rem} .tabla caption{text-align:left;font-weight:700;color:#fff;padding:0 0 .6rem} .tabla th,.tabla td{text-align:left;vertical-align:top;padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--linea)} .tabla th{font-weight:700;color:#fff;border-bottom:2px solid var(--texto2)} .tabla td{color:var(--texto2)} /* aviso / nota destacada */ .aviso{max-width:68ch;margin:1.5rem 0;padding:1rem 1.25rem;background:var(--mar2);border:1px solid var(--linea)} .aviso>:first-child{margin-top:0} .aviso>:last-child{margin-bottom:0} .aviso strong{color:#fff} /* 9. AVISO DE COOKIES (el HTML lo genera js/sitio.js). Barra inferior sobre la barra movil fija; panel de configuracion modal */ .ck-aviso{position:fixed;left:0;right:0;bottom:var(--alto-barra);z-index:30;background:var(--mar3);border-top:1px solid var(--linea);padding:1rem 0;max-height:70vh;max-height:70dvh;overflow-y:auto} @media(min-width:900px){.ck-aviso{bottom:0}} .ck-aviso-in{display:grid;gap:.9rem} .ck-aviso .ck-texto{margin:0;font-size:.9375rem;line-height:1.5;color:var(--texto);max-width:80ch} .ck-botones{display:flex;flex-wrap:wrap;gap:.6rem} .ck-botones .btn{flex:1 1 11rem;min-height:46px;padding:0 1rem} @media(max-width:699px){ .ck-aviso{padding:.75rem 0} .ck-aviso-in{gap:.6rem} .ck-aviso .ck-texto{font-size:.875rem;line-height:1.4} .ck-aviso .ck-botones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem} .ck-aviso .ck-botones .btn{min-width:0;min-height:44px;padding:.3rem .5rem;line-height:1.2} .ck-aviso .ck-botones [data-ck="config"]{grid-column:1/-1} } @media(min-width:1000px){ .ck-aviso-in{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem} .ck-botones{flex-wrap:nowrap} .ck-botones .btn{flex:0 0 auto} } .ck-fondo{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:1rem;background:rgba(8,17,23,.82)} .ck-fondo[hidden]{display:none} .ck-panel{position:relative;width:min(40rem,100%);max-height:100%;overflow-y:auto;background:var(--mar2);border:1px solid var(--linea);padding:1.5rem;font-size:.9375rem;line-height:1.5} .ck-panel:focus{outline:0} .ck-panel p{margin:0 0 .75rem} .ck-tit{font:400 1.5rem/1.2 var(--titulo);color:#fff;padding-right:2.5rem} .ck-cerrar{position:absolute;top:.5rem;right:.5rem;width:44px;height:44px;font:400 1.75rem/1 var(--cuerpo);color:#fff;background:transparent;border:1.5px solid transparent;cursor:pointer} .ck-cerrar:hover{border-color:#fff} .ck-cat{border-top:1px solid var(--linea);padding-top:1rem;margin-top:1rem} .ck-cat-t{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;font-weight:700;color:#fff} .ck-cat-t label{font-weight:700} .ck-sw{display:inline-flex;align-items:center;gap:.6rem;font-weight:400} .ck-sw input{width:1.5rem;height:1.5rem;margin:0;accent-color:var(--cielo)} .ck-est{font-weight:400;color:var(--texto2)} .ck-lista{color:var(--texto2)} .ck-panel .ck-botones{margin-top:1.25rem} .pie .ck-abrir{display:inline-flex;align-items:center;min-height:44px;padding:0;font:inherit;color:var(--texto2);background:none;border:0;text-decoration:underline;text-underline-offset:.2em;cursor:pointer;text-align:left} .pie .ck-abrir:hover{color:#fff} html:not(.js) .ck-abrir{display:none} /* 10. MOVIMIENTO REDUCIDO */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important} .btn:active{transform:none}} /* 11. SELECTOR DE IDIOMA (ES | EN). Dos copias del mismo