/* ============================================================
   Suances — hoja de diseño (tema hijo Enfold)
   Fuentes locales · paleta costera · sin recursos externos
   ============================================================ */

/* ---------- Fuentes locales ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/fraunces.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;
  src:url('../fonts/fraunces-italic.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../fonts/mulish.woff2') format('woff2');}

:root{
  --sea:#1C4A63; --sea-2:#256A86; --tide:#3E8A8C; --prado:#5E7A4E; --teja:#C25A38;
  --mist:#EAEEED; --paper:#F6F9F8; --ink:#1B2A31; --muted:#5C6E75; --line:#D8E0DF;
  --maxw:1200px; --pad:clamp(20px,5vw,64px);
  --fam-d:'Fraunces',Georgia,'Times New Roman',serif;
  --fam-b:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---------- Tipografía base (sobre Enfold) ---------- */
#top, #top body, #top p, #top .entry-content-wrapper, #top input, #top select,
#top textarea, #top button, #top .av-special-heading .av-special-heading-tag{font-family:var(--fam-b);}
body{font-family:var(--fam-b);color:var(--ink);background:var(--mist);
  font-size:18px;line-height:1.72;-webkit-font-smoothing:antialiased;}
#top h1,#top h2,#top h3,#top h4,#top h5,#top h6,
#top .av-special-heading-tag,#top .avia-testimonial_content{font-family:var(--fam-d);font-weight:600;line-height:1.12;}
#top a{color:var(--sea);}
#top .container{max-width:var(--maxw);}

/* ---------- Cabecera ---------- */
#top #header{background:#ffffff;border-bottom:1px solid var(--line);box-shadow:none;}
#top #header_main .container{display:flex;align-items:center;}
/* Logo (imagen) */
#top #header .logo{width:auto!important;min-width:0;max-width:none;height:100%;display:flex;align-items:center;}
#top #header .logo a{display:flex!important;align-items:center;height:100%;padding:6px 0;text-decoration:none;position:relative!important;}
#top #header .logo img,#top #header .logo svg{display:block!important;height:64px!important;width:auto!important;max-width:none!important;margin:0!important;}
#top #header .logo a::before,#top #header .logo a::after{content:none!important;}

/* menú principal: legible, compacto, sin solape */
#top .av-main-nav > li > a{font-family:var(--fam-b);font-weight:600;font-size:clamp(.7rem,calc(.7rem + (.86rem - .7rem) * (100vw - 990px) / 210),.86rem);letter-spacing:.01em;}
#top .av-main-nav > li > a .avia-menu-text{color:var(--ink);opacity:.86;}
#top .av-main-nav > li > a:hover .avia-menu-text,
#top .av-main-nav > li.current-menu-item > a .avia-menu-text,
#top .av-main-nav > li.current_page_item > a .avia-menu-text{color:var(--sea);opacity:1;}
#top .av-main-nav > li > a{padding-left:6px;padding-right:6px;}
/* 31/07/2026: el padding de 12px por lado (24px por elemento) ya no cabe con
   los 10 elementos actuales del menú aunque el logo quepa de sobra — el
   nav.main_menu de Enfold se ancla por su ancho intrínseco desde la derecha
   (right:0, sin left explícito), así que si su contenido es más ancho que el
   hueco libre, se solapa con el logo en TODO ancho de escritorio (no solo en
   anchos intermedios). Verificado en navegador (DOM forzado) en 990, 1100,
   1199, 1200, 1366, 1440, 1600 y 1920px: con 6px de padding el hueco libre
   entre logo y menú es de al menos 31px en el caso más ajustado (990px).*/

/* submenú (Playas) */
#top .av-main-nav ul{background:#fff;border:1px solid var(--line);}
#top .av-main-nav ul a .avia-menu-text{color:var(--ink);}

/* dar aire al logo y a la barra (evita el solape logo/menú) */
#top.html_header_top.html_logo_left #header .logo{margin-right:clamp(14px,calc(14px + (36px - 14px) * (100vw - 990px) / 210),36px);}
#top #header .av_menu_icon{color:var(--ink);}
/* Ocultar buscador del menú */
#top .av_ksearch_wrap{display:none!important;}
#top .av-main-nav a[href*="?s="]{display:none!important;}
#top .av-main-nav li:has(>a[href*="?s="]){display:none!important;}

/* ---------- Ocultar barra de título/breadcrumb en portada ---------- */
body.home .title_container{display:none!important;}
body.home #main{padding-top:0!important;}
body.home .container_wrap.container_wrap_first{border-top:0!important;}

/* ---------- Utilidades de portada ---------- */
.su-wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}
.su-full{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;}

/* Logo del header un poco más grande (mantiene proporción; cabe en la cabecera) */
#top #header .logo img,#top #header .logo.avia-standard-logo img{
  width:clamp(140px,calc(140px + (182px - 140px) * (100vw - 990px) / 210),182px) !important;
  height:auto !important;
  max-height:clamp(70px,calc(70px + (92px - 70px) * (100vw - 990px) / 210),92px) !important;}
.su-eyebrow{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--tide);}
.su-home h1,.su-home h2,.su-home h3{font-family:var(--fam-d);text-wrap:balance;margin:0;}
.su-home p{margin:0;}
/* quitar el margen/padding que Enfold añade al contenido de la página */
body.home #main .container .template-page{padding:0!important;}
body.home #main .entry-content-wrapper > *{margin:0;}

/* Hero */
.su-hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;}
.su-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.su-hero .su-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,26,33,.36) 0%,rgba(11,26,33,.06) 30%,rgba(11,26,33,.52) 66%,rgba(11,26,33,.74) 100%);}
.su-hero .su-wrap{position:relative;padding-block:clamp(40px,8vw,92px);}
.su-hero .su-rule{width:64px;height:3px;background:var(--teja);margin-bottom:22px;border-radius:2px;}
#top .su-hero .su-eyebrow{color:#d3ebeb!important;}
#top .su-hero h1{color:#fff!important;font-size:clamp(2.6rem,7vw,5.2rem);margin:.26em 0 .22em;max-width:15ch;
  line-height:1.05;text-shadow:0 2px 30px rgba(8,20,25,.55),0 1px 3px rgba(8,20,25,.4);}
#top .su-hero p{max-width:46ch;font-size:clamp(1rem,1.6vw,1.2rem);color:#f2f6f5!important;
  text-shadow:0 1px 12px rgba(8,20,25,.5);}

/* Bienvenida */
.su-welcome{background:var(--mist);}
.su-welcome .su-wrap{padding-block:clamp(56px,9vw,110px);display:grid;gap:clamp(30px,5vw,64px);
  grid-template-columns:1.15fr .85fr;align-items:center;}
.su-welcome .su-lead{font-family:var(--fam-d);font-size:clamp(1.4rem,2.3vw,1.9rem);line-height:1.34;
  margin:14px 0 20px;color:var(--ink);}
.su-welcome p+p{margin-top:1em;}
.su-welcome .su-body{max-width:60ch;color:var(--ink);}
.su-welcome figure{margin:0;position:relative;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 52px -28px rgba(15,40,50,.55);}
.su-welcome figure img{width:100%;height:100%;object-fit:cover;display:block;}
.su-welcome figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-size:.76rem;
  color:#eef3f2;background:linear-gradient(0deg,rgba(10,24,30,.72),transparent);}

/* Rejilla de secciones */
.su-sections{background:var(--paper);border-block:1px solid var(--line);}
.su-sections .su-wrap{padding-block:clamp(56px,8vw,100px);}
.su-sec-head{max-width:56ch;margin-bottom:clamp(30px,5vw,52px);}
.su-sec-head h2{font-size:clamp(2rem,4vw,3rem);margin:10px 0 12px;}
.su-sec-head p{color:var(--muted);}
.su-grid{display:grid;gap:22px;grid-template-columns:repeat(12,1fr);}
.su-card{position:relative;border-radius:14px;overflow:hidden;text-decoration:none;color:#fff;
  min-height:300px;display:flex;align-items:flex-end;isolation:isolate;
  box-shadow:0 20px 46px -26px rgba(15,40,50,.5);}
.su-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s ease;}
.su-card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(10,24,30,.82) 4%,rgba(10,24,30,.13) 52%,rgba(10,24,30,.05));}
.su-card:hover img{transform:scale(1.05);}
.su-card .su-c{padding:22px 22px 24px;}
.su-card .su-k{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#cfe6e6;font-weight:700;}
.su-card h3{font-size:1.6rem;margin:6px 0 4px;color:#fff;}
.su-card p{font-size:.9rem;color:#e5eeed;opacity:.92;}
.su-card.big{grid-column:span 6;min-height:380px;}
.su-card.reg{grid-column:span 3;}
.su-card.wide{grid-column:span 6;}
.su-card:focus-visible{outline:3px solid var(--sea-2);outline-offset:3px;}

/* Banda «Los años 80» */
.su-ochenta{position:relative;color:#f4ece0;overflow:hidden;}
.su-ochenta > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:sepia(.6) saturate(.82) contrast(1.02) brightness(.82);}
.su-ochenta .su-veil{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 30% 20%,rgba(60,30,12,.26),transparent),
  linear-gradient(90deg,rgba(28,16,8,.82),rgba(28,16,8,.32));}
.su-ochenta .su-wrap{position:relative;padding-block:clamp(64px,10vw,128px);max-width:900px;margin:0;}
.su-ochenta .su-eyebrow{color:#e8b98f;}
.su-ochenta h2{font-family:var(--fam-d);font-style:italic;font-weight:400;
  font-size:clamp(2rem,4.4vw,3.4rem);color:#fbf3e8;margin:.3em 0;max-width:20ch;line-height:1.16;}
.su-ochenta p{max-width:54ch;color:#efe2d2;}
.su-ochenta .su-go{display:inline-block;margin-top:18px;font-weight:700;font-size:.86rem;letter-spacing:.04em;
  color:#fff !important;border-bottom:2px solid var(--teja);padding-bottom:3px;text-decoration:none;}

/* Cita panorámica */
.su-pano{position:relative;color:#fff;min-height:340px;display:flex;align-items:center;overflow:hidden;}
.su-pano > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.su-pano .su-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,34,44,.66),rgba(12,34,44,.18));}
.su-pano .su-wrap{position:relative;}
.su-pano blockquote{margin:0;max-width:24ch;font-family:var(--fam-d);
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.22;font-style:italic;text-shadow:0 2px 20px rgba(8,20,25,.4);}
.su-pano cite{display:block;margin-top:14px;font-family:var(--fam-b);font-style:normal;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#cfe6e6;}

/* Bandas de imagen dentro de las secciones interiores. Reutilizan .su-pano/.su-full de
   la Home (mismo lenguaje visual). La frase va abajo, sobre un degradado que oscurece la
   parte inferior: nunca texto blanco sobre cielo claro. Punto focal desplazado hacia
   abajo para que en móvil no se quede en un trozo de cielo. */
.su-article .su-pano{min-height:clamp(320px,44vw,520px);margin-block:clamp(40px,6vw,72px);
  align-items:flex-end;border-radius:2px;}
.su-article .su-pano img{position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;max-width:none !important;
  object-fit:cover !important;object-position:center 62% !important;}
.su-article .su-pano .su-veil{background:
  linear-gradient(0deg,rgba(9,24,31,.82) 0%,rgba(9,24,31,.42) 40%,rgba(9,24,31,0) 78%),
  linear-gradient(90deg,rgba(9,24,31,.55),rgba(9,24,31,0) 62%);}
.su-article .su-pano .su-wrap{padding-block:0 clamp(26px,4vw,48px);}
.su-article .su-pano blockquote{margin:0;max-width:26ch;font-family:var(--fam-d);
  font-style:italic;font-weight:400;color:#fff;font-size:clamp(1.4rem,3vw,2.4rem);
  line-height:1.2;text-shadow:0 2px 24px rgba(6,16,20,.55);}

/* Forzar color claro en títulos sobre foto (Enfold impone su color de encabezado) */
#top .su-card h3{color:#fff!important;}
#top .su-card .su-k,#top .su-card p{color:#e5eeed!important;}
#top .su-ochenta h2{color:#fbf3e8!important;}
#top .su-pano blockquote{color:#fff!important;text-shadow:0 2px 20px rgba(8,20,25,.55);}
#top .su-pano cite{color:#dfeeee!important;}

/* ---------- Pie propio (ocultamos el de Enfold) ---------- */
#top #footer,#top #socket{display:none!important;}
.su-footer{background:#11242C;color:#c6d3d4;font-family:var(--fam-b);}
.su-foot-cols{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,7vw,80px) var(--pad);
  display:grid;gap:36px;grid-template-columns:1.4fr 1fr 1fr 1fr;}
.su-foot-n{font-family:var(--fam-d);font-size:1.5rem;color:#fff;}
.su-foot-t{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#7fa0a6;margin:6px 0 14px;}
.su-foot-blurb{font-size:.9rem;max-width:34ch;color:#a9bcbe;line-height:1.6;}
.su-foot-col h4{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:#7fa0a6;margin:0 0 14px;}
.su-foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.su-foot-col a{color:#fff !important;text-decoration:none;font-size:.92rem;}
.su-foot-col a:hover{color:#fff !important;text-decoration:underline;}
.su-foot-base{border-top:1px solid #223b44;}
.su-foot-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;padding:18px var(--pad);font-size:.78rem;color:#7fa0a6;}

/* ============================================================
   PÁGINAS DE CONTENIDO (Historia, Playas, Hoteles, legales…)
   Solo maquetación. No se toca el texto.
   ============================================================ */
/* Cabecera de página: título en Fraunces sobre banda clara */
body.page:not(.home) .title_container{background:var(--paper);border-bottom:1px solid var(--line);}
body.page:not(.home) .title_container .container{padding-block:clamp(30px,4.5vw,54px);max-width:var(--maxw);}
body.page:not(.home) .main-title,
body.page:not(.home) .main-title a{font-family:var(--fam-d)!important;font-weight:600!important;
  font-size:clamp(1.9rem,3.6vw,2.9rem)!important;color:var(--ink)!important;line-height:1.1;}
body.page:not(.home) .breadcrumb,
body.page:not(.home) .breadcrumb a,
body.page:not(.home) .breadcrumb .sep{color:var(--muted)!important;font-size:.8rem;}

/* Columna de lectura centrada y cómoda */
body.page:not(.home) .template-page.content{padding-block:clamp(40px,6vw,76px)!important;}
body.page:not(.home) .entry-content-wrapper{max-width:770px;margin-inline:auto;
  font-size:1.06rem;line-height:1.78;color:var(--ink);}
body.page:not(.home) .entry-content-wrapper h2{font-family:var(--fam-d);font-weight:600;
  font-size:clamp(1.55rem,2.6vw,2rem);line-height:1.16;margin:1.7em 0 .5em;color:var(--ink);}
body.page:not(.home) .entry-content-wrapper h2:first-child{margin-top:0;}
body.page:not(.home) .entry-content-wrapper h3{font-family:var(--fam-d);font-weight:600;
  font-size:1.32rem;margin:1.5em 0 .35em;color:var(--sea);}
body.page:not(.home) .entry-content-wrapper p{margin:0 0 1.15em;}
body.page:not(.home) .entry-content-wrapper a{color:var(--sea);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--sea) 40%,transparent);text-underline-offset:2px;}
body.page:not(.home) .entry-content-wrapper a:hover{text-decoration-color:var(--teja);}
body.page:not(.home) .entry-content-wrapper ul,
body.page:not(.home) .entry-content-wrapper ol{margin:0 0 1.15em;padding-left:1.3em;}
body.page:not(.home) .entry-content-wrapper li{margin:.35em 0;}
body.page:not(.home) .entry-content-wrapper strong{color:var(--ink);}

/* Imágenes migradas (alignright/alignleft/center) — cuidadas, sin estrujar el texto */
body.page:not(.home) .entry-content-wrapper img{border-radius:11px;
  box-shadow:0 16px 36px -22px rgba(15,40,50,.55);height:auto;}
body.page:not(.home) .wp-block-image.alignright,
body.page:not(.home) figure.alignright,
body.page:not(.home) .entry-content-wrapper img.alignright{float:right;max-width:42%;margin:.35em 0 1.1em 1.7em;}
body.page:not(.home) .wp-block-image.alignleft,
body.page:not(.home) figure.alignleft,
body.page:not(.home) .entry-content-wrapper img.alignleft{float:left;max-width:42%;margin:.35em 1.7em 1.1em 0;}
body.page:not(.home) .wp-block-image.aligncenter,
body.page:not(.home) figure.aligncenter{clear:both;margin:1.6em auto;text-align:center;}
body.page:not(.home) .entry-content-wrapper figure{margin-block:0;}
@media (max-width:640px){
  body.page:not(.home) .wp-block-image.alignright,body.page:not(.home) figure.alignright,
  body.page:not(.home) .wp-block-image.alignleft,body.page:not(.home) figure.alignleft{
    float:none;max-width:100%;margin:1.2em 0;}
}

/* Cita / blockquote */
body.page:not(.home) .entry-content-wrapper blockquote{border-left:3px solid var(--teja);
  margin:1.5em 0;padding:.2em 0 .2em 22px;font-family:var(--fam-d);font-style:italic;
  font-size:1.12rem;color:var(--muted);background:none;}

/* Galerías [gallery] → rejilla limpia y uniforme con lightbox de Enfold */
body.page:not(.home) .wp-block-gallery{display:block!important;}
body.page:not(.home) .gallery{display:grid!important;gap:12px;
  grid-template-columns:repeat(3,1fr)!important;grid-auto-rows:200px;margin:1.8em 0;width:auto;}
body.page:not(.home) .gallery br{display:none!important;}
body.page:not(.home) .gallery-item{width:auto!important;height:200px!important;overflow:hidden;
  margin:0!important;padding:0!important;float:none!important;border-radius:9px;}
body.page:not(.home) .gallery-icon,body.page:not(.home) .gallery-item a{margin:0!important;height:100%;display:block;}
body.page:not(.home) .gallery img{width:100%!important;height:200px!important;object-fit:cover;
  border:0!important;border-radius:9px;box-shadow:0 12px 28px -20px rgba(15,40,50,.5);}
body.page:not(.home) .gallery .gallery-caption{display:none;}
@media (max-width:640px){body.page:not(.home) .gallery{grid-template-columns:repeat(2,1fr)!important;}}

/* Tablas (p. ej. datos de hoteles si las hubiera) */
body.page:not(.home) .entry-content-wrapper table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.96rem;}
body.page:not(.home) .entry-content-wrapper th,
body.page:not(.home) .entry-content-wrapper td{border:1px solid var(--line);padding:9px 12px;text-align:left;}
body.page:not(.home) .entry-content-wrapper th{background:var(--paper);font-family:var(--fam-b);font-weight:700;}

/* Formulario de contacto (CF7) */
body.page:not(.home) .wpcf7{clear:both;display:block;margin-top:1.5em;}
body.page:not(.home) .wpcf7 label{display:block;font-weight:600;margin:0 0 16px;color:var(--ink);}
body.page:not(.home) .wpcf7 input[type=text],
body.page:not(.home) .wpcf7 input[type=email],
body.page:not(.home) .wpcf7 textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;
  border:1px solid var(--line);border-radius:9px;background:#fff;font:inherit;color:var(--ink);}
body.page:not(.home) .wpcf7 input:focus,
body.page:not(.home) .wpcf7 textarea:focus{outline:3px solid color-mix(in srgb,var(--sea) 30%,transparent);
  border-color:var(--sea);}
body.page:not(.home) .wpcf7 textarea{min-height:150px;resize:vertical;}
body.page:not(.home) .wpcf7 input[type=submit]{background:var(--sea);color:#fff;border:0;border-radius:9px;
  padding:13px 30px;font-weight:700;font-size:.95rem;cursor:pointer;transition:background .2s;}
body.page:not(.home) .wpcf7 input[type=submit]:hover{background:var(--sea-2);}

/* ============================================================
   SECCIONES CON CABECERA DE FOTO + «SIGUE EXPLORANDO»
   (Historia, Playas, … — nivel de la portada)
   ============================================================ */
/* nuestra cabecera sustituye a la barra de título de Enfold */
body.su-section .title_container{display:none!important;}
body.su-section #main .template-page.content{padding:0!important;}
body.su-section .entry-content-wrapper{max-width:none!important;padding:0!important;margin:0!important;}

/* Cabecera de sección: franja con foto y título encima */
.su-page-hero{position:relative;min-height:clamp(130px,19vh,200px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;}
.su-page-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;}
.su-page-hero .su-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,26,33,.34) 0%,rgba(11,26,33,.12) 42%,rgba(11,26,33,.68) 100%);}
/* Franja de color para secciones sin foto (Fiestas, Hoteles, Restaurantes, Enlaces, Contacto) */
.su-page-hero--plain{background:linear-gradient(120deg,var(--sea) 0%,#123448 100%);}
.su-page-hero--plain .su-veil{display:none;}
.su-page-hero .su-wrap{position:relative;padding-block:clamp(16px,2.4vw,28px);}
.su-page-hero .su-eyebrow{color:#d3ebeb;}
#top .su-page-hero h1{font-family:var(--fam-d)!important;font-weight:600!important;color:#fff!important;
  font-size:clamp(2rem,4.6vw,3.4rem)!important;line-height:1.08;margin:.18em 0 0!important;
  text-shadow:0 2px 26px rgba(8,20,25,.5);max-width:20ch;}

/* Columna de artículo con el texto del autor */
.su-article{max-width:920px;margin:0 auto;padding:clamp(44px,6vw,78px) var(--pad);}
/* Entradilla: primer párrafo destacado (frase ya existente, sin cambiarla) */
.su-article > p:first-of-type{font-size:1.28rem;line-height:1.6;font-weight:500;color:var(--ink);
  margin-bottom:1.3em;}

/* Bloque «Sigue explorando» */
.su-related{background:var(--paper);border-top:1px solid var(--line);}
.su-related .su-wrap{padding-block:clamp(44px,6vw,74px);}
.su-related .su-eyebrow{display:block;margin-bottom:20px;}
.su-rgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.su-rcard{position:relative;border-radius:13px;overflow:hidden;text-decoration:none;color:#fff;
  min-height:190px;display:flex;align-items:flex-end;isolation:isolate;
  box-shadow:0 18px 40px -24px rgba(15,40,50,.5);}
.su-rcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease;}
.su-rcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(10,24,30,.82) 6%,rgba(10,24,30,.1) 60%);}
.su-rcard:hover img{transform:scale(1.05);}
.su-rcard-t{padding:18px 20px;font-family:var(--fam-d);font-weight:600;font-size:1.35rem;color:#fff;}
.su-rcard:focus-visible{outline:3px solid var(--sea-2);outline-offset:3px;}
/* Tarjeta de color para secciones sin foto */
.su-rcard--plain{background:linear-gradient(120deg,var(--sea) 0%,#123448 100%);}
.su-rcard--plain::after{display:none;}
/* La foto de Restaurantes (La Dársena) es apaisada: encuadrar por la parte de abajo */
#top .su-rcard[href="/restaurantes/"] img{object-fit:cover !important;object-position:50% 100% !important;}

/* ============================================================
   RESTAURANTES — bloques editoriales foto + texto alternados
   ============================================================ */
.su-restos{display:flex;flex-direction:column;gap:clamp(34px,5vw,60px);margin:2.4em 0;}
.su-resto{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(22px,3.5vw,46px);align-items:stretch;}
.su-resto:nth-child(even) .su-resto-media{order:2;}
.su-resto-media{position:relative;border-radius:15px;overflow:hidden;
  min-height:clamp(260px,27vw,340px);box-shadow:0 22px 48px -26px rgba(15,40,50,.55);}
.su-resto-media img{position:absolute;inset:0;width:100%!important;height:100%!important;
  object-fit:cover;object-position:center;display:block;
  border-radius:0!important;box-shadow:none!important;margin:0!important;}
.su-resto-body{align-self:center;}
.su-resto-body h3{font-family:var(--fam-d);font-weight:600;font-size:clamp(1.5rem,2.4vw,1.95rem);
  color:var(--sea);margin:0 0 .32em;}
.su-resto-meta{margin:0 0 .85em!important;font-size:.92rem;color:var(--muted);font-weight:600;}
.su-resto-meta a{color:var(--sea);text-decoration:none;}
.su-resto-meta a:hover{color:var(--teja);text-decoration:underline;}
.su-resto-body > p:last-child{margin:0;color:var(--ink);}
.su-resto-note{max-width:720px;color:var(--muted);}
/* Listas de datos (Alojamientos) dentro de la tarjeta */
.su-resto-body ul{list-style:none;margin:.15em 0 0;padding:0;display:flex;flex-direction:column;gap:.5em;}
.su-resto-body ul li{position:relative;padding-left:1.15em;color:var(--ink);font-size:.98rem;line-height:1.5;}
.su-resto-body ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--teja);}
.su-resto-body ul li a{color:var(--sea);text-decoration:none;font-weight:600;}
.su-resto-body ul li a:hover{color:var(--teja);text-decoration:underline;}
/* Tarjeta sin foto (alojamiento sin imagen oficial localizable) */
.su-resto--nomedia{grid-template-columns:1fr;background:linear-gradient(135deg,#eef5f5,#e1edef);
  border-radius:15px;border-left:5px solid var(--sea);
  padding:clamp(22px,3vw,32px) clamp(24px,3.4vw,40px);
  box-shadow:0 14px 34px -26px rgba(15,40,50,.5);}
.su-resto--nomedia .su-resto-body{align-self:auto;}
.su-aloj-h2{font-family:var(--fam-d);color:var(--sea);font-weight:600;
  font-size:clamp(1.7rem,3vw,2.3rem);margin:2.2em 0 .1em;}
@media (max-width:760px){
  .su-resto{grid-template-columns:1fr;gap:16px;}
  .su-resto:nth-child(even) .su-resto-media{order:0;}
  .su-resto-media{min-height:0;aspect-ratio:16/10;}
  .su-resto-media img{position:absolute;inset:0;}
}

/* ============================================================
   GALERÍA EN MOSAICO (Fotos Antiguas) — muestra cada foto entera
   ============================================================ */
body.page:not(.home) .su-gallery-masonry .gallery{display:block!important;column-count:3;column-gap:16px;
  grid-template-columns:none!important;grid-auto-rows:auto!important;margin:1.8em 0;width:auto;}
body.page:not(.home) .su-gallery-masonry .gallery-item{width:100%!important;height:auto!important;
  break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 16px!important;padding:0!important;
  float:none!important;overflow:visible!important;display:inline-block;}
body.page:not(.home) .su-gallery-masonry .gallery-icon,
body.page:not(.home) .su-gallery-masonry .gallery-item a{height:auto!important;display:block;margin:0!important;}
body.page:not(.home) .su-gallery-masonry .gallery img{width:100%!important;height:auto!important;
  object-fit:unset!important;border:0!important;border-radius:9px;
  box-shadow:0 12px 30px -18px rgba(15,40,50,.55);transition:transform .35s ease,box-shadow .35s ease;}
body.page:not(.home) .su-gallery-masonry .gallery-item:hover img{transform:translateY(-4px);
  box-shadow:0 20px 40px -20px rgba(15,40,50,.6);}
body.page:not(.home) .su-gallery-masonry .gallery br,
body.page:not(.home) .su-gallery-masonry .gallery .gallery-caption{display:none!important;}
@media(max-width:900px){body.page:not(.home) .su-gallery-masonry .gallery{column-count:2;column-gap:12px;}}
@media(max-width:520px){body.page:not(.home) .su-gallery-masonry .gallery{column-count:2;column-gap:8px;}
  body.page:not(.home) .su-gallery-masonry .gallery-item{margin-bottom:8px!important;}}

/* ============================================================
   MAPA DE GOOGLE MAPS (Cómo llegar) — responsive
   ============================================================ */
.su-map-wrapper{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:14px;margin:2em 0;box-shadow:0 18px 44px -26px rgba(15,40,50,.5);}
.su-map-wrapper iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;
  border:none;border-radius:14px;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  body{font-size:17px;}
  .su-welcome .su-wrap{grid-template-columns:1fr;}
  .su-foot-cols{grid-template-columns:1fr 1fr;}
  .su-card.big,.su-card.wide{grid-column:span 12;}
  .su-card.reg{grid-column:span 6;}
}
@media (max-width:560px){
  .su-card.reg{grid-column:span 12;}
  .su-foot-cols{grid-template-columns:1fr;}
  .su-hero{min-height:78vh;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* Aviso de cookies (solo técnicas) — banner propio, de primera parte, sin terceros.
   Oculto por defecto; JS lo muestra solo si el visitante no lo ha aceptado aún. */
.su-cookie{position:fixed;left:50%;bottom:clamp(12px,3vw,26px);transform:translateX(-50%);
  z-index:9999;display:none;width:min(700px,calc(100% - 26px));
  align-items:center;gap:14px 22px;flex-wrap:wrap;
  background:var(--sea);color:#e7f0f0;
  padding:15px clamp(18px,2.4vw,26px);border-radius:14px;
  box-shadow:0 18px 46px -18px rgba(12,32,42,.72);
  font-family:var(--fam-b);font-size:.92rem;line-height:1.5;}
.su-cookie.is-visible{display:flex;}
.su-cookie p{margin:0;flex:1 1 320px;color:#d7e6e6;}
.su-cookie a{color:#fff !important;text-decoration:underline;text-underline-offset:2px;}
.su-cookie button{flex:0 0 auto;cursor:pointer;border:0;
  background:var(--teja);color:#fff;font-family:var(--fam-b);font-weight:700;
  font-size:.9rem;padding:10px 24px;border-radius:9px;
  transition:background .15s ease;}
.su-cookie button:hover{background:#a8482b;}
.su-cookie button:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media (max-width:520px){
  .su-cookie{flex-direction:column;align-items:stretch;text-align:center;gap:9px;
    bottom:10px;width:calc(100% - 18px);padding:11px 15px;border-radius:12px;
    font-size:.8rem;line-height:1.35;}
  .su-cookie p{flex:none;}
  .su-cookie button{width:100%;padding:9px 18px;font-size:.84rem;}}

/* 31/07/2026: sustituido el ajuste anterior (media query fija 990-1199px,
   con salto brusco de margen justo en la frontera 1199/1200) por clamp()
   fluido en las 3 reglas de arriba (tamaño del logo, su margen y el
   font-size del menú): interpolan sin escalon entre 990px (mas ajustado)
   y 1200px (donde el .container llega a su max-width fijo y ya no cambia
   mas), asi el hueco libre entre logo y menu no se desploma en ningun
   punto de la frontera. Fuera de ese rango clamp() se queda en su tope. */