/* alquilernautico.com — hoja de estilo unica
Aplica la Ficha de Direccion de Arte del 23/08/2026.
Paleta medida del logo original. Sin librerias. */
:root{
--abismo:#061318;
--marea:#0E2A33;
--turquesa:#00FBD3;
--espuma:#EAF2F0;
--apagado:#8FA8A5;
--arena:#F2EDE4;
--arena-linea:rgba(6,19,24,.16);
--poniente:#FF8A3D;
--linea:rgba(234,242,240,.14);
--titular:'Archivo',system-ui,-apple-system,sans-serif;
--cuerpo:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;
--env:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--abismo);color:var(--espuma);font-family:var(--cuerpo);
font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
picture{display:block}
a{color:var(--turquesa);text-underline-offset:3px}
.env{max-width:var(--env);margin:0 auto;padding:0 26px}
h1,h2,h3,h4{font-family:var(--titular);font-weight:800;font-stretch:125%;
font-variation-settings:'wdth' 125;letter-spacing:-.01em;line-height:1.07;margin:0}
h1{font-size:clamp(31px,5.4vw,60px);text-transform:uppercase}
h2{font-size:clamp(23px,3.1vw,36px);text-transform:uppercase;margin-bottom:20px}
h3{font-size:19px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
h4{font-size:15px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
p{margin:0 0 17px}
.mono{font-family:var(--mono)}
.apagado{color:var(--apagado)}
/* ---------- cabecera ---------- */
.barra{position:sticky;top:0;z-index:40;background:rgba(6,19,24,.94);
backdrop-filter:blur(9px);border-bottom:1px solid var(--linea)}
.barra .env{display:flex;align-items:center;gap:20px;min-height:66px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--espuma);flex:0 0 auto}
.marca img{height:40px;width:auto}
nav.menu{display:flex;gap:19px;flex-wrap:wrap;flex:1 1 auto}
nav.menu a{color:var(--espuma);text-decoration:none;font-size:14px;font-weight:600;
padding:5px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav.menu a:hover{border-bottom-color:var(--turquesa)}
nav.menu a[aria-current]{border-bottom-color:var(--turquesa);color:var(--turquesa)}
/* El telefono NO es un cajon de color: es un dato con un filete debajo, como los titulares.
Antonio (23/08): «los cajones no pueden ser tan bastos, deberian tener sutilidad». */
.tel{font-family:var(--mono);font-weight:600;font-size:16px;text-decoration:none;
background:transparent;color:var(--espuma);padding:7px 2px 5px;white-space:nowrap;
border-bottom:2px solid var(--turquesa);transition:color .25s}
.tel:hover{color:var(--turquesa)}
.idiomas{font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.idiomas a{text-decoration:none}
@media(max-width:900px){
/* el menú se desliza, pero sin enseñar la barra de desplazamiento */
nav.menu{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;
scrollbar-width:none;-ms-overflow-style:none}
nav.menu::-webkit-scrollbar{display:none}
}
/* ---------- portada ---------- */
.hero{position:relative;min-height:clamp(420px,66vh,640px);display:flex;align-items:flex-end;
border-bottom:1px solid var(--linea);overflow:hidden}
.hero .foto{position:absolute;inset:0}
/* La caja del hero es 2,4:1 y las fotos son 1,5:1 ⇒ se recorta el 37% del alto.
Al 55% el recorte caía en el cielo. Medido: el motivo está en la franja baja. */
.hero .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 72%}
/* el velo tiene que ganar ABAJO, que es donde va el texto: medido, con .2 el reclamo
turquesa sobre cielo claro no se leia */
/* Velo suave: la foto tiene que seguir viéndose. La legibilidad del reclamo NO se
resuelve oscureciendo la imagen entera, sino con su propia pastilla (.reclamo). */
.hero .velo{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(6,19,24,.30) 0%,rgba(6,19,24,.14) 26%,
rgba(6,19,24,.52) 58%,rgba(6,19,24,.90) 88%,rgba(6,19,24,.97) 100%)}
.hero .env{position:relative;padding-top:70px;padding-bottom:44px}
.hero h1{max-width:16ch}
/* ---------- portada PARTIDA ----------
Un velero es vertical y la caja del hero es apaisada: cualquier recorte se come
el barco o la costa. Con la portada partida la foto se ve ENTERA y el texto va
sobre fondo sólido, así que no hacen falta ni velos ni sombras. */
.hero.partido{display:grid;grid-template-columns:1fr;align-items:stretch;min-height:0;
background:var(--abismo)}
.hero.partido .velo{display:none}
/* 🚨 La altura la marca la CAJA, no la imagen. Antes el min-height estaba en el ![]()
y su height:100% no se apoyaba en nada (el padre no tenía altura definida), así que
ganaba el min-height: MEDIDO a 1440x900, la foto salía de 648px dentro de una columna
de 729px y dejaba 81px de banda negra muerta debajo. Es lo que hacía que la portada
pareciera sin terminar. Con la foto en absoluto, rellena su mitad pase lo que pase. */
.hero.partido .foto{position:relative;inset:auto;order:-1;min-height:280px}
.hero.partido .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
min-height:280px}
.hero.partido .env{max-width:none;padding:44px 26px 48px;display:flex;flex-direction:column;
justify-content:center}
.hero.partido h1,.hero.partido p.bajada,.hero.partido .reclamo{text-shadow:none}
/* Contraste de escala: la cifra grande en mono contra la etiqueta pequeña.
Es lo que llena la columna con INFORMACIÓN en vez de con aire. */
.cifras{display:grid;grid-template-columns:repeat(3,auto);gap:0;margin-top:34px;
border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cifras div{padding:18px 22px 16px 0}
.cifras div+div{padding-left:22px;border-left:1px solid var(--linea)}
.cifras b{display:block;font-family:var(--mono);font-weight:600;font-size:clamp(19px,2.1vw,26px);
color:var(--turquesa);line-height:1.1;letter-spacing:-.01em}
.cifras span{display:block;font-size:12px;line-height:1.35;color:var(--apagado);margin-top:7px}
.acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
@media(max-width:520px){
.cifras{grid-template-columns:1fr;border-bottom:0}
.cifras div{padding:14px 0;border-bottom:1px solid var(--linea)}
.cifras div+div{padding-left:0;border-left:0}
.acciones .boton{width:100%;text-align:center}
}
@media(min-width:900px){
.hero.partido{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.hero.partido .foto{order:0;min-height:clamp(460px,72vh,700px)}
.hero.partido .env{padding:60px 56px 60px max(26px,calc((100vw - var(--env))/2 + 26px))}
}
/* El reclamo lleva el MISMO filete que los titulares de seccion: coherencia en vez de
pastilla pegada. La legibilidad sobre foto la da la sombra de texto, no una caja. */
.reclamo{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.2em;
text-transform:uppercase;color:var(--espuma);margin-bottom:20px;
text-shadow:0 1px 12px rgba(6,19,24,.95),0 0 30px rgba(6,19,24,.7)}
.reclamo::before{content:'';display:block;width:38px;height:2px;background:var(--turquesa);margin-bottom:14px}
.hero h1{text-shadow:0 2px 28px rgba(6,19,24,.6),0 0 60px rgba(6,19,24,.35)}
.hero p.bajada{text-shadow:0 1px 18px rgba(6,19,24,.75)}
.hero p.bajada{max-width:56ch;font-size:19px;margin-top:18px}
/* interiores: cabecera mas baja */
.hero.interior{min-height:clamp(280px,42vh,420px)}
/* ---------- bloques ---------- */
section.bloque{padding:66px 0;border-bottom:1px solid var(--linea)}
section.bloque.clara{background:var(--arena);color:var(--abismo);border-bottom-color:var(--arena-linea)}
section.bloque.clara .apagado{color:#5C6B68}
section.bloque h2::before{content:'';display:block;width:38px;height:2px;background:var(--turquesa);margin-bottom:16px}
section.bloque.clara h2::before{background:var(--marea)}
.entradilla{max-width:62ch;font-size:19px}
.rejilla{display:grid;gap:24px}
.r2{grid-template-columns:1fr}
.r3{grid-template-columns:1fr}
@media(min-width:760px){.r2{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.r3{grid-template-columns:repeat(3,1fr)}}
/* tarjeta de servicio: sin esquinas redondeadas ni sombra */
.tarjeta{border:1px solid var(--linea);display:flex;flex-direction:column;text-decoration:none;color:inherit}
section.bloque.clara .tarjeta{border-color:var(--arena-linea)}
.tarjeta .foto{aspect-ratio:16/10;overflow:hidden}
.tarjeta .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tarjeta:hover .foto img{transform:scale(1.04)}
.tarjeta .txt{padding:22px 22px 26px}
.tarjeta h3{margin-bottom:9px}
.tarjeta:hover h3{color:var(--turquesa)}
section.bloque.clara .tarjeta:hover h3{color:var(--marea)}
.tarjeta p{font-size:15px;margin-bottom:14px}
.desde{font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--turquesa)}
section.bloque.clara .desde{color:#0A6B5C}
/* ---------- elemento firma: la flota a escala ---------- */
.flota{margin-top:26px}
.flota .fila{display:grid;grid-template-columns:150px 1fr 96px;gap:14px;align-items:center;
padding:9px 0;border-bottom:1px solid rgba(234,242,240,.08);text-decoration:none;color:inherit}
.flota .fila:hover{background:rgba(0,251,211,.05)}
.flota .fila .n{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flota .fila:hover .n{color:var(--turquesa)}
/* la celda del medio DEBE ser bloque: si no, el ancho en % de la barra no se apoya en nada */
.flota .fila > .pista{display:block;width:100%}
.flota .barra-e{display:block;height:12px;background:var(--turquesa);min-width:4px}
.flota .barra-e.patron{background:transparent;border:1px solid var(--turquesa)}
.flota .m{font-family:var(--mono);font-size:12px;text-align:right;color:var(--apagado);white-space:nowrap}
.leyenda{display:flex;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;
color:var(--apagado);margin-top:18px}
.llave{display:inline-block;width:22px;height:9px;vertical-align:middle;margin-right:8px}
@media(max-width:620px){.flota .fila{grid-template-columns:112px 1fr 66px;gap:9px}}
.sello{display:inline-block;background:var(--poniente);color:var(--abismo);font-family:var(--mono);
font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px}
/* ---------- tarifas ---------- */
.tarifa{width:100%;border-collapse:collapse;font-size:15px;margin:6px 0 22px;max-width:640px}
.tarifa caption{text-align:left;font-family:var(--titular);font-weight:800;font-stretch:125%;
font-variation-settings:'wdth' 125;text-transform:uppercase;font-size:15px;
letter-spacing:.04em;padding-bottom:9px}
.tarifa th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
text-align:left;color:var(--apagado);border-bottom:1px solid var(--linea);padding:8px 12px 8px 0}
.tarifa td{border-bottom:1px solid var(--linea);padding:9px 12px 9px 0}
.tarifa td+td,.tarifa th+th{font-family:var(--mono);text-align:right;padding-right:0;white-space:nowrap}
section.bloque.clara .tarifa th{color:#5C6B68;border-bottom-color:var(--arena-linea)}
section.bloque.clara .tarifa td{border-bottom-color:var(--arena-linea)}
/* ---------- ficha tecnica ---------- */
.ficha{width:100%;border-collapse:collapse;font-size:15px;max-width:560px}
.ficha th{text-align:left;font-weight:400;color:var(--apagado);padding:9px 16px 9px 0;
border-bottom:1px solid var(--linea);white-space:nowrap}
.ficha td{font-family:var(--mono);text-align:right;padding:9px 0;border-bottom:1px solid var(--linea)}
section.bloque.clara .ficha th{color:#5C6B68;border-bottom-color:var(--arena-linea)}
section.bloque.clara .ficha td{border-bottom-color:var(--arena-linea)}
/* ---------- cuerpo largo con secciones ----------
800+ palabras seguidas son un muro. Con H3 cada 150-200 palabras se lee. */
.cuerpo-largo{margin-top:52px;display:grid;gap:38px;grid-template-columns:1fr}
@media(min-width:900px){.cuerpo-largo{grid-template-columns:1fr 1fr;gap:38px 56px}}
.cuerpo-largo section{max-width:62ch}
.cuerpo-largo h3{margin-bottom:12px;position:relative;padding-top:16px}
.cuerpo-largo h3::before{content:'';position:absolute;top:0;left:0;width:30px;height:2px;background:var(--turquesa)}
.cuerpo-largo p{font-size:16px}
section.bloque.clara .cuerpo-largo h3::before{background:var(--marea)}
/* ---------- SIGUE POR AQUÍ ----------
Tres enlaces contextuales al final de cada página. Sin esto las interiores son
callejones sin salida: el visitante llega y no tiene adónde ir. */
.sigue .pieza{display:block;text-decoration:none;color:inherit;border:1px solid var(--linea);
padding:22px 22px 26px;transition:border-color .25s}
.sigue .pieza:hover{border-color:var(--turquesa)}
.sigue .pieza h3{margin-bottom:8px}
.sigue .pieza:hover h3{color:var(--turquesa)}
.sigue .pieza p{margin:0;font-size:14px;color:var(--apagado)}
section.bloque.clara .sigue .pieza{border-color:var(--arena-linea)}
section.bloque.clara .sigue .pieza:hover{border-color:var(--marea)}
section.bloque.clara .sigue .pieza:hover h3{color:var(--marea)}
section.bloque.clara .sigue .pieza p{color:#5C6B68}
/* ---------- preguntas frecuentes ----------
A dos columnas: el titular a la izquierda y el acordeón a la derecha. A una sola
columna el acordeón se queda en 760px y deja media página muerta. */
.faq-rej{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:900px){
.faq-rej{grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:48px;align-items:start}
.faq-rej > h2{margin-bottom:0;position:sticky;top:96px}
}
.faq-rej .apoyo{font-size:15px;color:var(--apagado);max-width:34ch;margin-top:16px}
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:15px;font-family:var(--mono);
font-size:20px;color:var(--turquesa);line-height:1}
.faq details[open] summary::after{content:'–'}
.faq summary:hover{color:var(--turquesa)}
.faq details p{margin:0 0 20px;max-width:66ch;color:var(--espuma);opacity:.85}
section.bloque.clara .faq{border-top-color:var(--arena-linea)}
section.bloque.clara .faq details{border-bottom-color:var(--arena-linea)}
section.bloque.clara .faq summary::after{color:var(--marea)}
section.bloque.clara .faq details p{color:var(--abismo)}
/* ---------- listas ---------- */
ul.pauta{list-style:none;padding:0;margin:0}
ul.pauta li{padding:11px 0 11px 26px;position:relative;border-bottom:1px solid var(--linea)}
ul.pauta li::before{content:'';position:absolute;left:0;top:20px;width:12px;height:2px;background:var(--turquesa)}
section.bloque.clara ul.pauta li{border-bottom-color:var(--arena-linea)}
section.bloque.clara ul.pauta li::before{background:var(--marea)}
/* Una foto vertical dentro de una columna se come la página entera: se acota
y se recorta, en vez de dejar que mande el alto original. */
figure picture img{width:100%;max-height:520px;object-fit:cover;object-position:50% 45%}
/* pie de foto: obligatorio decir que la imagen es ilustrativa */
.pie-foto{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
color:var(--apagado);padding-top:9px}
section.bloque.clara .pie-foto{color:#5C6B68}
/* ---------- BANDA A SANGRE ----------
Parte la página en capítulos: cambia la textura y evita que todo sea el mismo
patrón de arriba abajo. Aquí es donde vive el sello ámbar. */
.banda{position:relative;border-bottom:1px solid var(--linea);overflow:hidden;
min-height:clamp(300px,44vh,420px);display:flex;align-items:flex-end}
.banda .foto{position:absolute;inset:0}
.banda .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;max-height:none}
.banda .velo{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(6,19,24,.20) 0%,rgba(6,19,24,.55) 58%,rgba(6,19,24,.94) 100%)}
/* width:100% obligatorio: como .banda es flex, el .env se encogía al ancho de su
contenido y el texto quedaba desalineado con el resto de la retícula. */
.banda .env{position:relative;width:100%;padding:44px 26px 40px}
.banda h2{margin-bottom:14px}
.banda p{max-width:52ch;margin:0}
.banda .pie{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
color:var(--apagado);margin-top:16px}
/* ---------- formulario ---------- */
.formu{display:grid;gap:14px;max-width:430px}
.formu label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--apagado)}
.formu input,.formu select,.formu textarea{width:100%;background:transparent;border:1px solid var(--linea);
color:var(--espuma);font-family:var(--cuerpo);font-size:16px;padding:12px 13px}
.formu input:focus,.formu select:focus,.formu textarea:focus{outline:2px solid var(--turquesa);outline-offset:-1px}
.formu select option{background:var(--abismo);color:var(--espuma)}
.boton{display:inline-block;background:var(--turquesa);color:var(--abismo);border:0;
font-family:var(--mono);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
font-size:14px;padding:14px 24px;cursor:pointer;text-decoration:none}
.boton:hover{background:#5CFDE2}
/* Solo el envio del formulario va macizo. Todo lo que es navegar va en filete:
si el turquesa relleno sale en tres sitios deja de significar nada. */
/* 🚨 CORREGIDO 25/08: esta regla aplanaba TODO. El marcado del hero distingue
(llamar) de (navegar), y al pintar en filete
los dos, la acción que da dinero quedaba igual de callada que un enlace de menú.
MEDIDO: los enlaces macizos son 35 en toda la web y los 35 son «Llamar al 669 06 27 56»,
uno por página. El acento no se devalúa: queda reservado a la ÚNICA acción que convierte.
Navegar sigue yendo en filete, que era el criterio bueno. */
a.boton.ghost{background:transparent;color:var(--turquesa);border:1px solid var(--turquesa);padding:13px 23px}
a.boton.ghost:hover{background:var(--turquesa);color:var(--abismo)}
a.boton:hover{background:#5CFDE2;color:var(--abismo)}
/* Campo trampa antispam. 🚨 MEDIDO: hacía que TODA la web se deslizara en horizontal
(documento 2150 px contra pantalla 1425). Dos causas encadenadas:
1) `left:-9999px` ensancha el documento;
2) al corregirlo, `.formu input{width:100%}` GANABA en especificidad (0,1,1 > 0,1,0)
y le devolvía el ancho completo.
Por eso el selector va con la clase del formulario delante. */
.formu input.trampa{position:absolute;width:1px;height:1px;padding:0;border:0;
overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* ---------- BARRA FIJA DE ACCIÓN (solo móvil) ----------
El visitante llega de una búsqueda en el móvil y quiere resolver ya. */
.accion-fija{display:none}
@media(max-width:820px){
.accion-fija{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;
z-index:60;border-top:1px solid var(--abismo)}
.accion-fija a{display:flex;align-items:center;justify-content:center;min-height:56px;
font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.06em;
text-transform:uppercase;text-decoration:none}
.af-llamar{background:var(--turquesa);color:var(--abismo)}
.af-wa{background:#25D366;color:#062B14}
body{padding-bottom:56px}
/* 🚨 MEDIDO a 375px: el `white-space:nowrap` de la primera columna hacía que la tabla
de flota no cupiera y la PÁGINA ENTERA se desplazara en horizontal (documento 387
contra pantalla 375). Pasaba en las 6 páginas de barcos, que son las que venden.
En móvil el nombre parte línea y desaparece el desplazamiento; en escritorio sigue
en una sola línea, que es donde ese nowrap sí aporta. */
.ficha th{white-space:normal}
/* MEDIDO a 375px: de las 7 entradas del menú solo se ven 3. Las otras 4 están ahí
—el menú se desliza— pero la barra de scroll está oculta, así que no quedaba NINGUNA
pista de que se pudiera arrastrar. El degradado del borde derecho es esa pista:
corta la última entrada a propósito, que es lo que hace que la gente deslice. */
nav.menu{-webkit-mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,.12) 100%);
mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,.12) 100%)}
}
/* ---------- señales de confianza (hechos, no adornos) ---------- */
.confia div{border-left:2px solid var(--marea);padding:2px 0 2px 18px}
.confia b{display:block;font-family:var(--titular);font-weight:800;font-stretch:125%;
font-variation-settings:'wdth' 125;text-transform:uppercase;font-size:15px;
letter-spacing:.03em;margin-bottom:8px;line-height:1.25}
.confia p{margin:0;font-size:15px;color:#5C6B68}
/* ---------- pie ---------- */
footer{padding:56px 0 46px;font-size:15px;color:var(--apagado);background:var(--marea)}
footer h4{color:var(--espuma);margin-bottom:14px}
footer a{color:var(--apagado);text-decoration:none}
footer a:hover{color:var(--turquesa)}
.pie-rej{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:760px){.pie-rej{grid-template-columns:1.4fr 1fr 1fr}}
.legal{border-top:1px solid var(--linea);margin-top:36px;padding-top:22px;
font-family:var(--mono);font-size:12px;line-height:1.8}
/* ---------- apariciones (con red de seguridad) ---------- */
.rev{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rev.visto{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}
.migas{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--apagado);padding:16px 0 0}
/* franja fina: las migas NO merecen una sección con 66px de aire arriba y abajo */
.migas-barra{border-bottom:1px solid var(--linea)}
.migas-barra .migas{padding:13px 0}
.migas a{color:var(--apagado);text-decoration:none}
.migas a:hover{color:var(--turquesa)}