:root{--black:#000;--white:#fff;--gold:#D4AF37;--text:#111;--container:1320px;--navH:150px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);background:#fff;font:16px/1.55 system-ui,Segoe UI,Roboto,Arial}
/* Botón hamburguesa oculto por defecto (solo se muestra en móvil) */
.nav-toggle{display:none}
html{scroll-behavior:smooth;scroll-padding-top:var(--navH)}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{text-decoration:none;color:#000}
/* Garantizar que elementos con [hidden] no ocupen espacio (incluido el sprite SVG inline) */
[hidden]{display:none !important}
svg[hidden]{display:none !important;width:0;height:0;position:absolute;overflow:hidden}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:50%;top:10px;width:auto;height:auto;padding:10px 16px;background:#000;color:#fff;border-radius:8px;transform:translateX(-50%);z-index:1000}
.container{max-width:var(--container);margin:auto;padding:0 15px}
/* Más margen en tablet y smart displays (Nest Hub / Max) */
@media (min-width: 769px) and (max-width: 1024px){
  .container{ padding-left:32px; padding-right:32px }
}
@media (min-width: 1025px) and (max-width: 1280px){
  .container{ padding-left:38px; padding-right:38px }
}
header.site{position:sticky;top:0;z-index:50;background:#f8f9fa;border-bottom:1px solid #eee;box-shadow:0 2px 10px rgba(0,0,0,0.03)}
.brand{position:relative;width:310px;max-height:124px;overflow:hidden;display:flex;align-items:center}
.brand img{height:124px;width:auto;display:block}
header .bar{display:grid;grid-template-columns:310px 1fr auto;gap:12px;align-items:center;padding:10px 0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Alias para coherencia con el marcado existente (oculta texto accesible en banderas) */
.visualmente-oculto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Selector de idioma por banderas, fijo arriba a la derecha sin alterar el layout */
header .bar{position:relative}
.lang-flags{position:absolute;top:6px;right:8px;display:inline-flex;gap:6px;z-index:60}
.lang-flags a{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;border:1px solid rgba(0,0,0,0.08);background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.06);transition:transform .2s, box-shadow .2s, border-color .2s}
.lang-flags a:hover,.lang-flags a:focus-visible,.lang-flags a:active{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,0.1);border-color:var(--gold);outline:none}
.lang-flags a.active{border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,0.22)}
.lang-flags a span[aria-hidden="true"]{display:none}
/* Colored flags via CSS (no HTML changes) */
.lang-flags a[lang="es"]{
	background: linear-gradient(#c60b1e 0 33%, #ffce00 33% 66%, #c60b1e 66% 100%);
}
.lang-flags a[lang="de"]{
	background: linear-gradient(#000 0 33%, #dd0000 33% 66%, #ffce00 66% 100%);
}
.lang-flags a[lang="en"]{
  /* SVG Union Jack para asegurar color y nitidez en tamaños pequeños */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><rect width='60' height='60' fill='%23012169'/><g stroke='%23fff' stroke-width='10'><path d='M0 0 L60 60'/><path d='M60 0 L0 60'/></g><g stroke='%23cf142b' stroke-width='6'><path d='M0 0 L60 60'/><path d='M60 0 L0 60'/></g><g fill='%23fff'><rect x='24' y='0' width='12' height='60'/><rect x='0' y='24' width='60' height='12'/></g><g fill='%23cf142b'><rect x='26.5' y='0' width='7' height='60'/><rect x='0' y='26.5' width='60' height='7'/></g></svg>") center/cover no-repeat #012169;
}
@media (max-width:900px){.lang-flags{top:4px;right:6px}.lang-flags a{width:20px;height:20px}.lang-flags a span[aria-hidden="true"]{font-size:13px}}
/* Uniformar bandera DE en móvil en TODAS las páginas: usar SVG consistente */
@media (max-width: 900px){
  .lang-flags a[lang="de"]{
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><rect y='0' width='60' height='20' fill='%23000'/><rect y='20' width='60' height='20' fill='%23dd0000'/><rect y='40' width='60' height='20' fill='%23ffce00'/></svg>") center/cover no-repeat;
  }
}
@media (max-width:520px){.lang-flags{top:3px;right:5px}.lang-flags a{width:18px;height:18px}.lang-flags a span[aria-hidden="true"]{font-size:12px}}
@media (max-width: 520px){
  .lang-flags a[lang="de"]{
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><rect y='0' width='60' height='20' fill='%23000'/><rect y='20' width='60' height='20' fill='%23dd0000'/><rect y='40' width='60' height='20' fill='%23ffce00'/></svg>") center/cover no-repeat;
  }
}
.navlinks{display:flex;justify-content:center;gap:12px;flex-wrap:nowrap;overflow:visible}
.navlinks a{position:relative;padding:6px 8px;border-radius:10px;white-space:nowrap;transition:color .25s;font-size:16px}
.navlinks a::after{content:"";position:absolute;left:8px;right:8px;bottom:3px;height:2px;background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.4,.0,.2,1)}.navlinks a:hover{background:#f5f5f5}.navlinks a:hover::after{transform:scaleX(1)}.navlinks a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.navlinks a.active{color:var(--gold);font-weight:600}.navlinks a.active::after{transform:scaleX(1);background:var(--gold)}
.cta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.bar.bar--llucmajor .cta{margin-right:36px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #000;border-radius:10px;transition:.15s;white-space:nowrap;font-size:14px}
.btn:hover,.btn:active{transform:translateY(-1px)}.btn.primary{background:#000;color:#fff;border-color:#000}.btn.gold{border-color:var(--gold);background:linear-gradient(135deg, rgba(212,175,55,0.15) 0%, rgba(230,196,96,0.08) 100%);color:#111}
/* Resaltado dorado uniforme en hover/focus para todos los botones */
.btn{position:relative;--btn-border:currentColor}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:0;opacity:0;transition:opacity .35s, box-shadow .35s;pointer-events:none}
.btn:hover,.btn:focus-visible,.btn:active,.btn.pressed{border-color:var(--gold);color:inherit}
.btn:hover::before,.btn:focus-visible::before,.btn:active::before,.btn.pressed::before{opacity:1;box-shadow:0 0 0 2px rgba(212,175,55,0.55),0 4px 14px -4px rgba(212,175,55,0.55)}
.btn.primary:hover,.btn.primary:focus-visible,.btn.primary:active{background:#000;color:#fff}
.btn.gold:hover,.btn.gold:focus-visible,.btn.gold:active{background:linear-gradient(135deg, rgba(212,175,55,0.25) 0%, rgba(230,196,96,0.15) 100%);}
/* Header compacto al hacer scroll */
header.site{transition:box-shadow .25s ease, background-color .25s ease}
header.site.is-shrunk .bar{padding:6px 0}
header.site.is-shrunk .brand{max-height:92px}
header.site.is-shrunk .brand img{height:92px}
header.site.is-shrunk .navlinks a{padding:5px 8px}
header.site.is-shrunk .btn{padding:6px 10px}
/* Variante icono compacto */
.btn-icon{padding:6px 10px;border-radius:10px;line-height:0;min-width:auto}
.btn-icon svg{width:20px;height:20px;display:block}
.whatsapp-mini{border-color:var(--gold);background:transparent;color:var(--gold)}
.whatsapp-mini:hover{background:var(--gold);border-color:var(--gold);color:#111}
@media (max-width:1120px){:root{--navH:160px}header .bar{grid-template-columns:200px 1fr;grid-template-areas:"logo cta" "nav nav"}.brand{grid-area:logo;width:200px;max-height:70px}.brand img{height:70px}.navlinks{grid-area:nav;padding-top:6px;border-top:1px solid #eee;flex-wrap:wrap}.cta{grid-area:cta;justify-content:flex-end}}
@media (max-width:1024px){:root{--navH:140px} .brand{width:176px;max-height:66px;margin-left:2px} .brand img{height:66px} .navlinks a{font-size:15px} header.site.is-shrunk .brand{max-height:66px} header.site.is-shrunk .brand img{height:66px} header.site.is-shrunk .bar{padding:10px 0} }
@media (max-width:640px){ .brand{width:120px;max-height:48px} .brand img{height:48px} }
.hero{padding:36px 0 12px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
.hero h1{font-size:clamp(28px,3.6vw,46px);margin:0 0 10px}
.hero p.lead{font-size:clamp(16px,2vw,20px);color:#333;margin:0 0 18px}
.actions{display:grid;grid-template-columns:repeat(3,max-content);gap:12px;align-items:center}

@media (max-width:900px){
  .actions{grid-template-columns:1fr}
  .actions .btn{justify-content:center}
}

.hero .media{
    border-radius:22px;
    overflow:hidden;
    border:1px solid #eee;
    background:#fafafa;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.hero .media img{
    width:100%;
    height:auto;
    aspect-ratio:1536/1024;
    display:block;
    max-height:450px;
    object-fit:contain;
    object-position:center;
    image-rendering: -webkit-optimize-contrast;
  /* Mejora de nitidez: usar -webkit-optimize-contrast y pixelated como fallback sin usar crisp-edges (menos compatible) */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated; /* fallback opcional */
}
.section{padding:46px 0;border-top:1px solid #f0f0f0;scroll-margin-top:var(--navH)}
.section h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 14px;padding-top:10px}
.section p.sub{color:#555;margin:0 0 22px}

/* Móvil/tablet: títulos de apartados centrados y espaciado ordenado */
@media (max-width: 1024px){
  .section h2{ text-align:center; }
  .section p.sub{ text-align:center; margin:6px 0 22px; }
  /* Subtítulo sector (debajo de Proyectos) centrado también */
  .sector-subtitle{ text-align:center; }
  /* Títulos de módulos internos (cards, banners, etc.) */
  .section h3{ text-align:center; margin:0 0 12px; }
}

/* Efecto zoom para toda la sección de profesionales */
/* Efecto primer plano para la sección de profesionales - versión optimizada */
#profesionales{transition:box-shadow 0.3s ease, border-color 0.3s ease, margin 0.3s ease;border-radius:20px;margin:20px 0;padding:40px 0;border:1px solid transparent;position:relative}
#profesionales:hover{box-shadow:0 15px 30px rgba(0,0,0,0.08);border-color:rgba(212,175,55,0.15);margin:10px 0 30px}
#profesionales:hover::before{opacity:1}
#profesionales::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:20px;border:2px solid transparent;border-image:linear-gradient(135deg, rgba(212,175,55,0.4) 0%, rgba(212,175,55,0) 50%, rgba(212,175,55,0.2) 100%) 1;opacity:0;transition:opacity 0.4s ease;pointer-events:none}
#profesionales *{text-rendering:optimizeLegibility}
.hotel-banner{margin-bottom:30px;background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);border-radius:20px;padding:25px;display:grid;grid-template-columns:1.2fr 0.8fr;gap:24px;align-items:center;border:1px solid rgba(0,0,0,0.05);box-shadow:0 10px 30px rgba(0,0,0,0.05)}
.hotel-banner .content{padding-right:20px}
.hotel-banner h3{font-size:26px;margin:0 0 15px;color:#000}
.hotel-banner .subtitle{font-size:18px;color:#D4AF37;font-weight:600;margin:0 0 10px;text-transform:uppercase;letter-spacing:1px}
.hotel-banner p{color:#444;margin:0 0 15px;font-size:16px;line-height:1.6}
.hotel-banner ul{margin:0 0 20px;padding-left:20px;color:#444}
.hotel-banner ul li{margin:8px 0;position:relative;padding-left:5px}
.hotel-banner .cta-hotel{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.hotel-banner .img{border-radius:15px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,0.1);position:relative}
.hotel-gallery{position:relative;width:100%;height:0;padding-bottom:75%;overflow:hidden;border-radius:15px;box-shadow:0 10px 25px rgba(0,0,0,0.08)}
.hotel-gallery img.gallery-image{width:100%;height:100%;object-fit:cover;display:block;image-rendering: -webkit-optimize-contrast}
.hotel-gallery-inner{display:flex;transition:transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);position:absolute;top:0;left:0;width:100%;height:100%;will-change: transform;transform-style: preserve-3d}
.hotel-gallery-inner .slide{width:100%;flex:0 0 100%;height:100%;position:absolute;top:0;left:0;opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}
.hotel-gallery-inner .slide.active{opacity:1;visibility:visible;z-index:2}
.hotel-gallery .arrow{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;background:rgba(0,0,0,0.55);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;opacity:0.6;transition:opacity 0.3s, background 0.3s;z-index:2;border:none;font-size:14px;padding:0}
.hotel-gallery .arrow:hover{opacity:0.95;background:rgba(0,0,0,0.75)}
.hotel-gallery .arrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hotel-gallery .arrow::before{display:block;line-height:1;font-weight:600}
.hotel-gallery .prev::before{content:'‹'}
.hotel-gallery .next::before{content:'›'}
.hotel-gallery .prev{left:2px}
.hotel-gallery .next{right:2px}
.hotel-gallery-dots{position:absolute;bottom:6px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2}
.hotel-gallery-dots .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.55);cursor:pointer;border:1px solid rgba(0,0,0,0.25);padding:0;display:inline-flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s,box-shadow .25s}
.hotel-gallery-dots .dot.active{background:#fff;border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,0.28)}
.hotel-gallery-dots .dot:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Estrellas reseñas accesibles */
.rating-stars{color:#D4AF37;letter-spacing:1px;font-size:18px;display:inline-block}

/* Reordenación móvil/tablet para Cadenas Hoteleras: Título, Subtítulo (dorado) y luego la galería */
@media (max-width: 1024px){
  .hotel-banner{grid-template-columns:1fr;grid-template-areas:
    "badge"
    "title"
    "subtitle"
    "image"
    "text"
    "listbtn"
    "list"
    "cta";
    text-align:center;
  }
  .hotel-banner .content{display:contents}
  .hotel-banner .badge-premium{grid-area:badge;justify-self:center;margin-bottom:8px}
  .hotel-banner h3{grid-area:title}
  .hotel-banner .subtitle{grid-area:subtitle}
  .hotel-banner .img{grid-area:image}
  .hotel-banner p:not(.subtitle){grid-area:text}
  /* Área de lista para móvil */
  .hotel-banner ul{grid-area:list}
  .hotel-banner .hotel-details-btn{grid-area:listbtn}
  .hotel-banner .cta-hotel{grid-area:cta;justify-content:center}
}

  /* En escritorio: mantener la lista visible y ocultar el botón del acordeón */
  @media (min-width: 1025px){
    .hotel-banner details.hotel-details[open] > summary{ display:none; }
  }

/* --- CREART ATELIER (simulación) --- */
.atelier-banner{position:relative;margin:24px 0 10px;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:20px;padding:22px;display:grid;grid-template-columns:0.9fr 1.1fr;gap:20px;align-items:stretch;border:1px solid rgba(0,0,0,0.05);box-shadow:0 10px 30px rgba(0,0,0,0.05);transition:box-shadow 0.3s ease, border-color 0.3s ease, margin 0.3s ease}
.atelier-banner:hover{border-color:rgba(212,175,55,0.2);box-shadow:0 15px 35px rgba(0,0,0,0.08);margin:14px 0 20px}
.atelier-banner .content{padding-right:10px}
.atelier-banner h3{font-size:24px;margin:6px 0 10px;color:#000}
.atelier-banner .subtitle{font-size:16px;color:#222;margin:0 0 10px}
.atelier-banner .cliche{font-weight:700;color:#111;margin:8px 0 6px;letter-spacing:.2px}
.atelier-banner .microcopy{color:#444;margin:0 0 12px}
.atelier-banner .cta-atelier{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
.atelier-banner .img{border-radius:15px;overflow:hidden;position:relative;background:#fff;border:1px solid rgba(0,0,0,0.05)}

/* Carrusel de módulos + miniaturas integradas */
.atelier-gallery{position:relative;width:100%;height:100%;min-height:420px}
.atelier-gallery-inner{position:relative;width:100%;height:100%}
.atelier-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s ease, visibility .35s ease;display:flex;flex-direction:column;justify-content:space-between;padding:16px}
.atelier-slide.active{opacity:1;visibility:visible}
.atelier-slide .module{flex:1;border:1px solid rgba(0,0,0,0.08);border-radius:14px;padding:16px;background:linear-gradient(180deg,#ffffff 0%, #f9f9fb 100%);box-shadow:0 5px 15px rgba(0,0,0,0.03);transition:box-shadow 0.3s ease, border-color 0.3s ease, margin-top 0.3s ease, margin-bottom 0.3s ease}
.atelier-slide .module:hover{box-shadow:0 8px 20px rgba(0,0,0,0.05);border-color:rgba(212,175,55,0.15);margin-top:-3px;margin-bottom:3px}
.atelier-slide .module h4{margin:0 0 8px;font-size:18px;color:#000}
.atelier-slide .module .sub{margin:0;color:#444}
.atelier-slide .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.atelier-slide .thumb{border-radius:10px;aspect-ratio:1/1;background:#f1f1f4;border:1px solid #eee;box-shadow:0 3px 10px rgba(0,0,0,.04)}
.atelier-slide .thumb.ph{background:repeating-linear-gradient(135deg,#f5f6f8,#f5f6f8 10px,#eceff3 10px,#eceff3 20px)}
.confidential-note{margin:8px 0 0;font-size:12px;font-style:italic;color:#888;text-align:right}
.atelier-gallery .arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;background:rgba(0,0,0,0.55);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;opacity:.7;transition:opacity .3s,background .3s;z-index:2;border:none;font-size:16px;padding:0}
.atelier-gallery .arrow:hover{opacity:.95;background:rgba(0,0,0,0.75)}
.atelier-gallery .prev::before{content:'‹'}
.atelier-gallery .next::before{content:'›'}
.atelier-gallery .prev{left:6px}
.atelier-gallery .next{right:6px}

@media (max-width: 900px){
  .atelier-banner{grid-template-columns:0.92fr 1.08fr}
  .atelier-banner .content{padding-right:8px}
}

/* Móvil: contenido arriba, galería debajo */
@media (max-width: 900px){
  .atelier-banner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "media";
  }
  .atelier-banner .content{ grid-area: content; padding-right: 0; text-align:center; align-items:center }
  .atelier-banner .img{ grid-area: media }
}

/* Ajustes móviles para evitar solapes y recortes en el carrusel y botones */
@media (max-width: 640px){
  .cta{gap:6px}
  .btn{padding:7px 10px;font-size:13px}
  .atelier-banner .img{overflow:visible} /* permite que el contenido del carrusel crezca sin ser recortado */
  /* Mantener una sola columna en móvil; el detalle del layout (áreas) se define arriba */
  .atelier-banner{grid-template-columns:1fr}
  /* La galería no debe recortarse en móvil y su altura la lidera atelier-enhanced.css */
  .atelier-gallery{min-height:420px;border-radius:12px;overflow:visible}
  .atelier-slide{padding:12px}
  .atelier-slide .module{padding:12px}
  .atelier-slide .module h4{font-size:16px}
  .atelier-slide .module .sub{font-size:14px;line-height:1.45}
  .atelier-slide .thumbs{grid-template-columns:repeat(2,1fr);gap:8px}
  .atelier-gallery .arrow{width:26px;height:26px}
}
@media (max-width: 560px){
  .atelier-banner{grid-template-columns:1fr}
  .atelier-banner .content{padding-right:0}
}

/* Interacción: zoom + halo dorado del bloque completo al hover/focus */
@media (hover:hover){
  .atelier-banner{transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, border-color .45s, filter .45s; will-change: transform}
  .atelier-banner::before{content:"";position:absolute;inset:-2px;border-radius:22px;pointer-events:none;opacity:0;transition:opacity .45s, box-shadow .45s}
  .atelier-banner:hover,
  .atelier-banner:focus-within{
  transform:scale(1.028) translateZ(0) translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 16px 54px rgba(0,0,0,0.12), 0 0 0 2px rgba(212,175,55,0.28);
    z-index: 5;
  }
  .atelier-banner:hover::before,
  .atelier-banner:focus-within::before{
    opacity:1;
    box-shadow: 0 0 0 4px rgba(212,175,55,0.14), 0 0 26px rgba(212,175,55,0.16) inset;
  }
}

@media (prefers-reduced-motion: reduce){
  .atelier-banner{transition: box-shadow .2s, border-color .2s}
  .atelier-banner:hover,
  .atelier-banner:focus-within{ transform:none }
}

/* Focus visible para tiles carrusel */
.grid-compact .tile:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.badge-premium{background:linear-gradient(135deg, #D4AF37 0%, #E6C460 100%);color:#fff;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;margin-bottom:15px;display:inline-block;opacity:0.9;letter-spacing:0.3px}

@media (max-width:768px){
  .hotel-banner{grid-template-columns:1fr;text-align:center}
  .hotel-banner .content{padding-right:0}
  .hotel-banner ul{display:inline-block;text-align:left}
  .hotel-banner .cta-hotel{justify-content:center}
}

/* Botón Ver detalles (nuevo) y colapso de lista */
@media (max-width: 1024px){
  .hotel-banner .hotel-details-btn{
    display:flex; align-items:center; gap:8px;
    padding:12px 14px; border:1px solid rgba(0,0,0,0.08);
    border-radius:12px; 
    background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color:#111; font-weight:600;
    width:100%; justify-content:center; cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
    transition:transform .15s, box-shadow .2s, border-color .2s;
  }
  .hotel-banner .hotel-details-btn:hover,
  .hotel-banner .hotel-details-btn:active{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,0.10);
    border-color:var(--gold);
  }
  .hotel-banner .hotel-details-btn:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
  }
  /* Estado expandido: aro de iluminación sutil como señalización activa */
  .hotel-banner .hotel-details-btn[aria-expanded="true"]{
    box-shadow:0 0 0 2px rgba(212,175,55,0.22), 0 2px 6px rgba(0,0,0,0.06);
  }
  .hotel-banner .hotel-details-btn::after{ content:'+'; color:#D4AF37; font-weight:700; }
  .hotel-banner .hotel-details-btn[aria-expanded="true"]::after{ content:'–'; }
  .hotel-banner ul.hotel-features.collapsed{ display:none; }
}
@media (min-width: 1025px){
  .hotel-banner .hotel-details-btn{ display:none !important; }
  .hotel-banner ul.hotel-features{ display:block !important; }
}

/* (LIMPIEZA) Reglas antiguas de <details> eliminadas: usamos botón propio */


.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:min(85%,360px);gap:16px;overflow-x:auto;padding-bottom:2px;scroll-snap-type:x mandatory}
.scroller::-webkit-scrollbar{display:none}
/* Ocultar scrollbar en navegadores compatibles (Firefox) sin romper otros */
.scroller{ /* scrollbar-width:none;  removido por compatibilidad */ will-change: scroll-position; }
.card{scroll-snap-align:start;border:1px solid #eee;border-radius:18px;overflow:hidden;background:#fff;display:flex;flex-direction:column;height:100%}
.card .img{position:relative}
.badge{position:absolute;left:12px;top:12px;background:#000;color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}
.card .img img{width:100%;height:220px;object-fit:cover}
.card .body{padding:14px;display:flex;flex-direction:column}
.spec{margin:8px 0 14px;padding-left:18px;color:#444}
.spec li{margin:4px 0}
.card .body .btn{margin-top:auto}

/* Estilos para las tarjetas premium */
.card-premium {
    scroll-snap-align: start;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 490px; /* Altura fija para garantizar consistencia */
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(0,0,0,0.05);
}

.card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

.card-premium .img {
    position: relative;
    overflow: hidden;
}

.img-hospital {
    background-color: #f8f9fa;
}

.optimized-image {
    image-rendering: -webkit-optimize-contrast;
    object-position: center;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.card-premium .img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.5s;
    image-rendering: -webkit-optimize-contrast;
}

.card-premium:hover .img img {
    transform: scale(1.05);
}

.card-premium .body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    height: 190px;
    overflow: hidden;
    justify-content: space-between;
}

.card-premium h3 {
    font-size: 17px;
    margin: 0 0 8px;
    color: #000;
    position: relative;
    padding-bottom: 8px;
}

/* Palma (solo móvil): micro-tipografía del párrafo bajo la lista de servicios
   - No cambia estructura ni imagen
   - Selección por imagen de Palma en el showcase usando :has()
*/
@media (max-width: 900px), (pointer: coarse) and (max-width: 1280px){
  /* Aplicar a cualquier página de zona (ES/EN/DE) detectando imágenes bajo assets/zonas/<zona>/ */
  #servicios .zone-showcase:has(.image-side img[src*="/zonas/"]) .content-side ul + p{
    font-size: 13px;
    line-height: 1.35;
    color: #333;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid #000; /* borde negro solicitado */
    border-radius: 10px;
    background: #fff; /* fondo blanco solicitado */
    box-shadow: none; /* sin sombra por defecto */
    transition: border-color .25s, box-shadow .35s;
  }
  /* Halo dorado como los botones al pasar el ratón (o foco) */
  #servicios .zone-showcase:has(.image-side img[src*="/zonas/"]) .content-side ul + p:hover,
  #servicios .zone-showcase:has(.image-side img[src*="/zonas/"]) .content-side ul + p:focus-visible,
  #servicios .zone-showcase:has(.image-side img[src*="/zonas/"]) .content-side ul + p:active{
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212,175,55,0.55), 0 4px 14px -4px rgba(212,175,55,0.55);
    outline: none;
  }
}

 

.card-premium h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: #D4AF37;
}

.card-premium .spec {
    margin: 3px 0 10px;
    padding-left: 15px;
    color: #444;
    flex-grow: 0;
}

.card-premium .spec li {
    margin: 3px 0;
    font-size: 13px;
    line-height: 1.3;
}

.card-premium .cta-card {
    margin-top: 0;
    text-align: center;
    padding-top: 5px;
    flex-shrink: 0;
}

.card-premium .cta-card .btn {
    padding: 6px 16px;
    font-size: 13px;
    line-height: 1.2;
    display: inline-block;
}

/* Relajar alturas fijas de tarjetas premium en móviles para evitar texto montado */
@media (max-width: 600px){
  .card-premium{height:auto}
  .card-premium .img img{height:220px}
  .card-premium .body{height:auto}
}

.card-premium .badge {
    position: absolute;
    left: 12px;
    top: 12px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.badge-sector {
    position: absolute;
    left: 12px;
    top: 12px;
    background: linear-gradient(135deg, #D4AF37 0%, #E6C460 100%);
    color: #fff;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
    text-transform: uppercase;
    opacity: 0.9;
}

.sector-subtitle {
    text-align: center;
    color: #666;
    font-size: 16px;
    margin: -5px 0 15px;
    font-style: italic;
}

.seo-text {
    text-align: center;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto 25px;
    padding: 0 10px;
}

/* --- Sección Profesionales --- */
.pro-section .pro-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  margin-top:18px;
}
.pro-section .pro-card{
  border:1px solid #eee;
  border-radius:16px;
  background:#fff;
  padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.pro-section .pro-card h3{
  margin:0 0 8px;
  font-size:18px;
  color:#000;
  position:relative;
  padding-bottom:6px;
}
.pro-section .pro-card h3::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:28px;height:2px;
  background:var(--gold);
}
.pro-section .pro-card .spec{
  margin:8px 0 0;
  padding-left:18px;
}
.pro-section .cta{ margin-top:14px; }

@media (max-width: 900px){
  .pro-section .pro-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px){
  .pro-section .pro-grid{ grid-template-columns: 1fr; }
}

/* Extensiones sección Profesionales: pasos y entregables */
.pro-section .pro-steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin: 18px 0 6px;
}
.pro-section .pro-step{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:14px;
  box-shadow:0 4px 14px rgba(0,0,0,0.05);
}
.pro-section .pro-step h4{
  margin:0 0 6px;
  font-size:16px;
  color:#111;
}
.pro-section .pro-step p{
  margin:0;
  color:#555;
  font-size:14px;
  line-height:1.5;
}
.pro-section .pro-deliverables{ text-align:center; margin: 14px 0; }
.pro-section .pro-deliverables h3{ margin: 0 0 10px; font-size:18px; }
.pro-section .badge-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  padding:0;
  margin:0;
  list-style:none;
}
.pro-section .badge-list li{
  border:1px solid #e8e8e8;
  background:#fafafa;
  border-radius:999px;
  padding:6px 10px;
  font-size:13px;
  color:#333;
}
@media (max-width: 900px){
  .pro-section .pro-steps{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .pro-section .pro-steps{ grid-template-columns: 1fr; }
}

.premium-projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

@media (max-width: 992px) {
    .premium-projects {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .premium-projects {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.grid-compact{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:24px;
  margin-top:30px;
  padding:10px 0 20px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  position:relative;
}

.grid-compact .tile{
  box-sizing:border-box;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  height: 320px;
  position: relative;
  flex: 0 0 auto; /* JS aplica ancho exacto (calc((100% - 72px)/4)) */
  scroll-snap-align: start;
  /* sin margen horizontal: usamos gap del contenedor para separar y cuadrar los 4 */
  cursor: pointer;
  z-index: 1;
}

.grid-compact .tile:hover{
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  transform: translateY(-4px); /* sin escala para no variar ancho */
  border-color: rgba(212, 175, 55, 0.3);
  z-index: 2;
}

/* Efecto especial para el tile central o enfocado */
/* Eliminado efecto de escala central */

/* Asegurar que el texto sea visible incluso en los tiles centrales */
.grid-compact .tile.tile-centered .body,
.grid-compact .tile.active-tile .body {
  height: auto;
  min-height: 30%;
}

/* Estilos para el botón dentro de las zonas */
.grid-compact .zone-cta .btn {
  padding: 7px 15px;
  font-size: 13px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #333;
  border-color: rgba(0,0,0,0.05);
  border-radius: 20px; /* Botón más redondeado */
  display: inline-block;
  transition: all 0.3s ease;
}

.grid-compact .zone-cta .btn:hover {
  background: linear-gradient(135deg, #D4AF37 0%, #E6C460 100%);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.grid-compact .cover{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  height: 70%; /* 70% de la altura para la imagen */
  width: 100%;
}

.grid-compact .cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* Ajustes opcionales por data-atributos para controlar el encuadre y ajuste */
.grid-compact .cover img[data-pos="top"]{ object-position: 50% 20%; }
.grid-compact .cover img[data-pos="center"]{ object-position: 50% 50%; }
.grid-compact .cover img[data-pos="bottom"]{ object-position: 50% 80%; }
.grid-compact .cover img[data-fit="contain"]{ object-fit: contain; background:#f8f9fa; }

/* Añadimos un degradado sutil en la parte inferior de la imagen */
.grid-compact .cover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, rgba(255,255,255,0.8), transparent);
  opacity: 0.7;
  transition: opacity 0.3s;
}

/* Sin zoom de imagen para no alterar percepción de anchura */
.grid-compact .tile:hover .cover img { transform:none; }

/* Ocultamos el degradado al hacer hover para una mejor visualización */
.grid-compact .tile:hover .cover::after {
  opacity: 0.3;
}

.grid-compact .body{
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto; /* Cambiado de 30% fijo a auto para adaptarse al contenido */
  min-height: 30%; /* Asegura un mínimo del 30% de la altura */
  position: relative;
  transition: all 0.4s ease-in-out; /* Transición suave para todos los cambios */
}

/* Estilos para hacer el tile completamente clickable */
.grid-compact .tile-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.grid-compact .body h3{
  font-size: 20px;
  margin: 0 0 8px;
  position: relative;
  padding-bottom: 8px;
  text-align: center;
  color: #333;
}

.grid-compact .body h3::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%; /* Centrado */
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background-color: #D4AF37;
}

.zone-info {
  display: block;
  color: #666;
  font-size: 14px;
  margin-top: 5px;
  line-height: 1.4;
  font-weight: 400;
  text-align: center;
  /* Limitamos a una sola línea y añadimos ellipsis si es demasiado largo */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  visibility: visible !important; /* Forzar visibilidad */
  opacity: 1 !important; /* Asegurar que no está transparente */
  pointer-events: auto; /* Habilitar interacciones */
  padding: 0 5px; /* Pequeño padding horizontal para textos largos */
}

.zone-description {
  display: none; /* Ocultamos la descripción larga */
}

.zone-cta {
  margin-top: 12px;
  text-align: center;
}

.grid-compact::-webkit-scrollbar {
  height: 0;  /* Ocultar la barra de desplazamiento */
  width: 0;
  display: none;
}

.grid-compact {
  -ms-overflow-style: none;  /* Internet Explorer y Edge */
  /* scrollbar-width: none;  removido para evitar warning; se mantiene oculto en WebKit via ::-webkit-scrollbar */
}

.grid-compact .hidden{
  display: flex; /* Cambiamos a flex para que se muestre */
  opacity: 1; /* Totalmente visible */
  transition: opacity 0.4s;
}

.grid-compact[data-expanded="true"] .hidden{
  display: flex;
  opacity: 1;
}

.grid-compact.expanding .tile {
  animation: fadeInUp 0.5s forwards;
}

/* Estilos para las flechas del carrusel - Rediseñadas para no parecer botones */
.carousel-arrow {
  position: absolute;
  top: 0; /* será recalculado por JS para centrar respecto a las tiles */
  transform: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: transparent; /* Sin fondo para no parecer botón */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease; /* Transición más suave */
  color: rgba(0, 0, 0, 0.5); /* Color gris semitransparente */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); /* Texto con sombra */
  opacity: 0.7;
}

.carousel-arrow.prev {
  left: 10px;
}

.carousel-arrow.next {
  right: 10px;
}

.carousel-arrow:hover {
  transform: translateY(-50%) scale(1.1);
  color: #D4AF37; /* Color dorado al pasar el mouse - acorde al estilo de la web */
  opacity: 0.9; /* Casi totalmente opaco al pasar el mouse */
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
}

/* Efectos de transición para las flechas */
.carousel-arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.carousel-arrow:hover::after {
  border-color: rgba(212, 175, 55, 0.3); /* Borde dorado al pasar el mouse */
  transform: scale(1.1);
}

/* Se han eliminado los estilos de los indicadores para evitar botones en la sección */

/* Clases antiguas neutralizadas (por si quedan en el DOM) */
.tile-centered, .tile-adjacent { transform:none !important; box-shadow:none !important; }
.tile-centered .cover, .tile-centered .body { height:auto !important; }

/* Ajustes responsive */
@media (max-width: 1200px) {
  .grid-compact .tile {
    flex: 0 0 calc(33.33% - 16px); /* 3 tiles en pantallas medianas */
    height: 300px; /* Altura reducida */
  }
  
  .carousel-arrow {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .grid-compact .tile {
    flex: 0 0 calc(50% - 12px); /* 2 tiles en tablets */
    height: 280px; /* Altura reducida */
  }
  
  .grid-compact .body h3 {
    font-size: 18px;
  }
  
  .carousel-arrow {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .carousel-arrow.prev {
    left: 5px;
  }
  
  .carousel-arrow.next {
    right: 5px;
  }
}

@media (max-width: 480px) {
  .grid-compact .tile {
    flex: 0 0 calc(85% - 8px); /* 1 tile casi completo en móviles */
    height: 270px; /* Altura reducida para móviles */
  }
  
  .grid-compact .body {
    padding: 12px 15px;
  }
  
  .grid-compact .body h3 {
    font-size: 17px;
    padding-bottom: 6px;
  }
  
  .grid-compact {
    padding-bottom: 30px; /* Más espacio para los indicadores en móviles */
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Restaurar estilos específicos para el contenedor de zonas (#zones-fold) eliminados por error */
#zones-fold{ -ms-overflow-style:none; /* scrollbar-width:none; */ }
#zones-fold::-webkit-scrollbar{ display:none; }

/* --- Footer de Zonas: replicar layout móvil del home (solo móvil/tablets) --- */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1280px) {
  /* Reorganizar a 2 columnas (Redes | Legal) y bloque con logo a ancho completo */
  footer.site .grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 16px !important;
    align-items: start !important;
  }
  footer.site .grid .footer-has-logo{
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  footer.site .grid .footer-has-logo .footer-logo{ width: 120px; height: 120px; object-fit: contain; }
  footer.site .grid .footer-has-logo .footer-txt h4{ margin: 6px 0 4px !important; }
  footer.site .grid .footer-has-logo .footer-txt p{ margin: 2px 0 !important; }
  /* En pantallas muy pequeñas, forzar cada dato en su línea para no romper centrado */
  @media (max-width: 560px){
    /* Aplicar también al home: footer con .footer-has-logo */
    footer.site .footer-has-logo{ text-align: center !important; align-items: center !important; }
    footer.site .footer-has-logo .footer-txt p{ margin: 2px 0 !important; }
  /* Email y teléfono: sin separación vertical extra */
  footer.site .footer-has-logo .footer-txt p a{ display: block !important; margin: 0 !important; }
  }

  /* Columnas inferiores: bloques verticales */
  footer.site .grid > div:not(.footer-has-logo){
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }
  footer.site .grid > div:not(.footer-has-logo) h4{ margin: 0 0 6px !important; }

  /* Mover ligeramente Redes hacia el centro sin afectar Legal */
  footer.site .grid > div:nth-of-type(2){
    justify-self: end !important;
    width: max-content !important;
    transform: translateX(-6px);
  }

  /* Pie legal centrado */
  footer.site .legal{ text-align: center !important; margin-top: 12px !important; }
}

.social{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{border:1px solid #eee;border-radius:18px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.tile .cover{position:relative}
.tile .cover img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#f7f7f7}
.badge-net{position:absolute;right:10px;bottom:8px;background:#000;color:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;font-size:0;opacity:.9;line-height:0}
.badge-net svg{width:20px;height:20px;display:block}
.tile .body{padding:12px}
.tile .body h3{margin:2px 0 8px;font-size:18px}
.tile .meta{color:#666;font-size:14px;margin-bottom:10px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review{border:1px solid #eee;border-radius:16px;padding:14px;background:#fff}

.toggle-zones-container {
  display: none; /* Ocultamos el contenedor del botón */
  justify-content: center;
  margin: 25px 0 15px;
}

.geo-keywords {
  margin-top: 30px;
  text-align: center;
}

.geo-keywords p {
  color: #777;
  font-size: 12px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

#toggle-zones {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-color: rgba(0,0,0,0.1);
  color: #333;
  font-weight: 500;
  padding: 10px 25px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#toggle-zones:hover, #toggle-zones:focus-visible, #toggle-zones:active {
  background: linear-gradient(135deg, #D4AF37 0%, #E6C460 100%);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

@media (max-width: 1024px), (pointer: coarse) and (max-height: 820px) and (max-width: 1280px){
  .hero .wrap{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "h1"
      "lead"
      "media"
      "actions";
    align-items:start;
    row-gap:14px;
    column-gap:0;
  }
  /* Permitir que h1, p.lead y .actions participen directamente en el grid */
  .hero .copy{ display:contents }
  .hero h1{ grid-area:h1 }
  .hero p.lead{ grid-area:lead }
  .hero .media{ grid-area:media; max-width:100%; margin: 6px 0 0 }
  .hero .actions{ grid-area:actions }
  .social,.reviews{grid-template-columns:repeat(2,1fr)}
  .grid-compact .tile {flex-direction: column; height: auto}
  .grid-compact .cover {flex: 0 0 180px; width: 100%}
  .grid-compact .body {padding: 18px}
  .actions{justify-content:center}
}
@media (max-width:560px){
  .hero .wrap{grid-template-columns:1fr;text-align:center}
  .hero .media {max-width: 85%; margin: 16px auto 0}
}

@media (max-width:768px){
  .hotel-banner{grid-template-columns:0.95fr 1.05fr;align-items:center}
  .hotel-banner .content{padding-right:10px}
}
@media (max-width:560px){
  .hotel-banner{grid-template-columns:1fr;text-align:center}
  .hotel-banner .content{padding-right:0}
  .hotel-banner ul{display:inline-block;text-align:left}
  .hotel-banner .cta-hotel{justify-content:center}
}

@media (max-width:576px){
  .grid-compact .tile {
    flex-direction: column;
    height: auto;
  }
  .grid-compact .cover {
    flex: 0 0 150px;
  }
  .grid-compact .body h3 {
    font-size: 18px;
    padding-bottom: 10px;
  }
}

.contact-cta{display:flex;flex-wrap:wrap;gap:10px}
.contact-cta .btn{border-radius:999px}
.contact-cta .btn svg{width:18px;height:18px;display:inline-block;vertical-align:middle}
.contact-cta .btn{gap:6px}
.zone-availability .contact-cta{justify-content:center}
.map-container{margin-top:30px;border-radius:16px;overflow:hidden;border:1px solid #eee}

/* Estilos para las páginas de zona */
.zone-showcase {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 25px;
  margin: 25px 0;
  align-items: start;
}

.zone-availability {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 18px;
  padding: 25px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.03);
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.zone-availability p {
  max-width: 700px;
  margin: 0 auto 20px;
  color: #444;
}

.zone-availability .contact-cta {
  justify-content: center;
}

/* FAQ compacto y elegante */
.faq-mini {
  margin:40px auto 10px;
  max-width:780px;
  position:relative;
  padding:28px 34px 8px;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:26px;
  background:radial-gradient(circle at 18% 22%, #ffffff 0%, #f7f8fa 60%, #f2f3f5 100%);
  box-shadow:0 10px 28px -8px rgba(0,0,0,0.08),0 4px 10px -2px rgba(0,0,0,0.04);
}
.faq-mini:before{
  content:"";
  position:absolute;inset:0;border-radius:26px;pointer-events:none;
  background:linear-gradient(140deg,rgba(212,175,55,0.25),rgba(255,255,255,0) 40%,rgba(212,175,55,0.18) 75%,rgba(255,255,255,0) 100%);
  /* masks eliminadas por compatibilidad */
  padding:1px; /* halo dorado sutil */
}
.faq-mini h2{
  margin:0 0 18px;
  font-size:clamp(18px,2.2vw,24px);
  text-align:center;
  letter-spacing:.5px;
  background:linear-gradient(90deg,#111,#555);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.faq-mini dl{margin:0;display:grid;grid-template-columns:1fr;gap:14px}
.faq-mini dt{font-weight:600;font-size:15px;line-height:1.35;position:relative;padding-left:18px;color:#111}
.faq-mini dt:before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#D4AF37,#E6C460)}
.faq-mini dd{margin:2px 0 0;font-size:14px;line-height:1.55;color:#444;padding-left:18px}
.faq-mini dd:last-child{padding-bottom:12px}

/* ===== Mobile Rescue Kit: Header (sin tocar HTML) ===== */
@media (max-width: 1024px), (pointer: coarse) and (max-height: 820px) and (max-width: 1280px){
  :root{ --navH: 170px; }
  /* Cabecera móvil con grid de dos filas: fila 1 banderas/WhatsApp; fila 2 logo + cta */
  header .bar{
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr; /* logo | cta */
    grid-template-rows: auto auto;   /* flags | contenido */
    grid-template-areas:
      "flags flags"
      "logo  cta";
    align-items: end; /* alinear logo/cta a base */
    row-gap: 6px;
    column-gap: 0; /* igual que en home para alinear bordes */
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  padding-right: calc(env(safe-area-inset-right, 0px) + 40px);
    padding-bottom: 8px;
    padding-left: 0; /* libre del margen izquierdo (idéntico a home) */
  }
  /* Logo: mismas proporciones y disposición que en home */
  .brand{ grid-area: logo; width: auto; max-height: 112px; display:block; align-self:end; justify-self:start; margin-left: 0; overflow: visible; max-width: none }
  .brand img{ width: auto; height: auto; max-height: 110px; object-fit: contain; display:block; transform: translate(1px, -1px) }
  /* Alineación usando la hamburguesa como referencia: grid 1fr + 42px */
  .cta{ grid-area: cta; display:grid; grid-template-columns: minmax(0,1fr) 48px; align-items:end; column-gap:10px; margin-top:0; padding-right:0; width:100%; align-self:end; justify-self:stretch }
  /* Banderas: ahora en la fila superior del grid, alineadas a la derecha (sin posición absoluta) */
  .lang-flags{ grid-area: flags; position: static; justify-self: end; margin: 0; display:inline-flex; gap:6px; z-index:2; grid-row:1; grid-column:2 }
  /* Ocultar navegación horizontal del header; se mostrará en panel móvil */
  .navlinks{ display:none }
  /* Botón hamburguesa dentro de la línea de CTAs */
  .nav-toggle{ display:inline-flex; margin-left:0; margin-right:0; align-items:center; justify-content:center; width:48px; height:48px; border-radius:12px; border:1px solid transparent; background:#f8f9fa; box-shadow:0 2px 6px rgba(0,0,0,0.06); cursor:pointer; position:relative; transition:transform .15s, border-color .35s, box-shadow .35s }
  .nav-toggle::before{ content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .35s, box-shadow .35s; pointer-events:none }
  .nav-toggle:hover, .nav-toggle:active, .nav-toggle.pressed{ transform:translateY(-1px); border-color: var(--gold) }
  .nav-toggle:hover::before, .nav-toggle:focus-visible::before, .nav-toggle:active::before, .nav-toggle.pressed::before{ opacity:1; box-shadow:0 0 0 2px rgba(212,175,55,0.55),0 4px 14px -4px rgba(212,175,55,0.55) }
  .cta .nav-toggle{ grid-column:2; justify-self:end }
  .nav-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
  .nav-toggle .bars{ position:relative; width:26px; height:20px; display:block }
  .nav-toggle .bars::before,
  .nav-toggle .bars::after,
  .nav-toggle .bar-mid{ content:""; position:absolute; left:50%; width:26px; height:3px; background:#000; border-radius:3px; transition:transform .25s ease, opacity .25s ease; transform-origin:center }
  .nav-toggle .bars::before,
  .nav-toggle .bars::after{ content:""; position:absolute; left:50%; width:26px; height:3px; background:#000; border-radius:3px; transition:transform .25s ease, opacity .25s ease; transform-origin:center }
  .nav-toggle .bars::before{ top:0; transform: translateX(-50%) }
  .nav-toggle .bar-mid{ top:50%; transform: translate(-50%, -50%) }
  .nav-toggle .bars::after{ bottom:0; transform: translateX(-50%) }
  .nav-toggle[aria-expanded="true"] .bars::before{ transform: translate(-50%, 7.5px) rotate(45deg) }
  .nav-toggle[aria-expanded="true"] .bar-mid{ opacity:0 }
  .nav-toggle[aria-expanded="true"] .bars::after{ transform: translate(-50%, -7.5px) rotate(-45deg) }
  /* Mantener proporciones en scroll (anular shrink en móvil) */
  header.site.is-shrunk .bar{ padding-top: calc(env(safe-area-inset-top, 0px) + 8px); padding-right: calc(env(safe-area-inset-right, 0px) + 40px); padding-bottom: 8px }
  header.site.is-shrunk .brand{ max-height: 94px }
  header.site.is-shrunk .brand img{ height: 94px }
  /* Panel móvil y backdrop */
  .mobile-menu-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.35); -webkit-backdrop-filter:saturate(120%) blur(1px); backdrop-filter:saturate(120%) blur(1px); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index: 80 }
  .mobile-menu{ position:fixed; top:0; left:0; right:0; transform: translateY(-12px); opacity:0; pointer-events:none; background:#fff; border-bottom:1px solid #eee; box-shadow:0 18px 38px rgba(0,0,0,0.12); border-radius:0 0 16px 16px; padding:12px 14px 16px; z-index: 90 }
  .mobile-menu.open, .mobile-menu-backdrop.open{ opacity:1; pointer-events:auto }
  .mobile-menu.open{ transform: translateY(0) }
  .mobile-menu nav{ display:flex; flex-direction:column; gap:8px }
  .mobile-menu nav a{ padding:10px 12px; border-radius:12px; border:1px solid #eee; background:#fafafa; position:relative; transition:transform .15s, border-color .35s, box-shadow .35s }
  .mobile-menu nav a::before{ content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .35s, box-shadow .35s; pointer-events:none }
  .mobile-menu nav a:hover, .mobile-menu nav a:focus-visible, .mobile-menu nav a:active, .mobile-menu nav a.pressed{ border-color: var(--gold); transform: translateY(-1px) }
  .mobile-menu nav a:hover::before, .mobile-menu nav a:focus-visible::before, .mobile-menu nav a:active::before, .mobile-menu nav a.pressed::before{ opacity:1; box-shadow:0 0 0 2px rgba(212,175,55,0.45),0 4px 12px -4px rgba(212,175,55,0.45) }
  body.menu-open{ overflow:hidden }

  /* CTA compactos: WhatsApp icono, Email etiqueta corta */
  .cta{ padding-left: 12px; }
  /* Ocultar WhatsApp del bloque CTA en móvil (irá arriba junto a banderas) */
  .cta a[href^="https://api.whatsapp.com"]{ display:none }
  /* Estilo del antiguo botón si se muestra en otros breakpoints (fallback) */
  .cta a[href^="https://api.whatsapp.com"].show-inline{
    position:relative;
    width:42px; height:42px; padding:0;
    border-radius:10px;
    border-color:#25D366; background:#fff;
    color:#111; font-size:0; /* ocultar texto */
    /* Fallback: aplicar también como background del propio botón */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%2325D366' d='M16 3C9.37 3 4 8.37 4 15c0 2.12.55 4.11 1.51 5.85L4 29l8.33-1.46C13.97 28.53 14.97 29 16 29c6.63 0 12-5.37 12-12S22.63 3 16 3z'/><path fill='%23fff' d='M23.21 20.38c-.18.5-.9.9-1.47 1.02-.39.08-.9.14-1.47-.09-.34-.13-.78-.25-1.34-.49-2.35-1.02-3.88-3.4-4.01-3.56-.12-.17-.96-1.27-.96-2.42 0-1.16.61-1.73.83-1.97.22-.24.48-.31.64-.31.16 0 .32 0 .46.01.15.01.34-.05.53.41.19.46.65 1.61.71 1.73.06.12.1.27.02.44-.08.17-.12.27-.24.41-.12.14-.25.32-.36.43-.12.12-.25.25-.11.48.14.24.63 1.03 1.35 1.67.92.82 1.7 1.08 1.94 1.2.25.12.4.1.54-.06.14-.15.62-.72.79-.97.16-.24.33-.2.55-.12.22.08 1.39.65 1.63.77.24.12.4.18.46.28.06.1.06.6-.12 1.1z'/></svg>");
    background-repeat:no-repeat; background-position:center; background-size:22px 22px;
  }
  .cta a[href^="https://api.whatsapp.com"].show-inline::before{
    content:""; position:absolute; inset:0; margin:auto; width:22px; height:22px; display:block;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%2325D366' d='M16 3C9.37 3 4 8.37 4 15c0 2.12.55 4.11 1.51 5.85L4 29l8.33-1.46C13.97 28.53 14.97 29 16 29c6.63 0 12-5.37 12-12S22.63 3 16 3z'/><path fill='%23fff' d='M23.21 20.38c-.18.5-.9.9-1.47 1.02-.39.08-.9.14-1.47-.09-.34-.13-.78-.25-1.34-.49-2.35-1.02-3.88-3.4-4.01-3.56-.12-.17-.96-1.27-.96-2.42 0-1.16.61-1.73.83-1.97.22-.24.48-.31.64-.31.16 0 .32 0 .46.01.15.01.34-.05.53.41.19.46.65 1.61.71 1.73.06.12.1.27.02.44-.08.17-.12.27-.24.41-.12.14-.25.32-.36.43-.12.12-.25.25-.11.48.14.24.63 1.03 1.35 1.67.92.82 1.7 1.08 1.94 1.2.25.12.4.1.54-.06.14-.15.62-.72.79-.97.16-.24.33-.2.55-.12.22.08 1.39.65 1.63.77.24.12.4.18.46.28.06.1.06.6-.12 1.1z'/></svg>") center/contain no-repeat;
  }
  /* Icono Email como "bandera" adicional: círculo negro con sobre blanco */
  .lang-flags a.flag-email{
    width:22px; height:22px; border-radius:999px;
    background-color:#111; /* negro */
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M2 5h20a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm0 2v.17l10 6.66 10-6.66V7H2zm20 10V9.14l-9.37 6.23a1 1 0 0 1-1.26 0L2 9.14V17h20z'/></svg>");
    background-repeat:no-repeat; background-position:center; background-size:13px 13px;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
    border:1px solid rgba(0,0,0,0.08);
  }
  @media (max-width:900px){
    .lang-flags a.flag-email{ width:20px; height:20px; background-size:12px 12px }
  }
  @media (max-width:520px){
    .lang-flags a.flag-email{ width:18px; height:18px; background-size:11px 11px }
  }
  .cta a[href^="mailto:"]{
    display:flex; align-items:center; justify-content:center;
    height:42px; line-height:1;
    padding:0 10px; border-radius:10px;
    font-size:12px; margin:0 5px 0 0; /* separación exacta respecto a la hamburguesa */
    width:auto; max-width:100%; min-width:0; box-sizing:border-box;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    text-align:center;
  }
  /* (sin icono) centramos el texto; si hubiera SVG, se mostrará inline y se recortará con el texto */
  /* Alineación y truncado del email en una sola línea para no desplazar la hamburguesa */
  .cta a[href^="mailto:"]{ grid-column:1; justify-self:start; align-self:end; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; min-width:0; line-height:1 }
  /* En pantallas muy estrechas, reducimos un punto la fuente del email */
  @media (max-width: 380px){
    .cta a[href^="mailto:"]{ font-size:11.5px; padding:0 9px }
  }
  /* Ocultar Email del bloque CTA en móvil (se muestra como icono arriba) */
  .cta a[href^="mailto:"]{ display:none !important }

  /* WhatsApp como "bandera" adicional: círculo verde con logo blanco */
  .lang-flags a.flag-whatsapp{
    width:22px; height:22px; border-radius:999px;
  background-color:#25D366; /* color oficial */
  /* Logo oficial en blanco (optimizado para tamaños pequeños) */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M20.52 3.48A11.86 11.86 0 0 0 12.04 0C5.55 0 .3 5.25.3 11.74c0 2.07.54 4.09 1.56 5.88L0 24l6.56-1.7a11.7 11.7 0 0 0 5.48 1.4h.01c6.49 0 11.74-5.25 11.74-11.74 0-3.14-1.22-6.09-3.27-8.16Zm-8.48 18.7h-.01a9.75 9.75 0 0 1-4.97-1.36l-.36-.21-3.89 1 1.04-3.79-.24-.39A9.78 9.78 0 0 1 2.3 11.74C2.29 6.36 6.66 2 12.04 2c2.61 0 5.06 1.02 6.9 2.86a9.66 9.66 0 0 1 2.85 6.88c0 5.38-4.37 9.74-9.75 9.74Zm5.35-7.31c-.29-.14-1.7-.84-1.96-.93-.27-.1-.46-.14-.66.14-.2.29-.76.93-.93 1.12-.17.19-.34.21-.62.07-.29-.14-1.22-.45-2.33-1.43-.86-.77-1.45-1.72-1.62-2-.17-.29-.02-.45.13-.59.13-.13.29-.34.43-.5.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.5-.07-.14-.66-1.59-.9-2.18-.24-.58-.48-.5-.66-.51l-.56-.01c-.19 0-.5.07-.76.36-.26.29-1 1-1 2.43 0 1.43 1.02 2.81 1.16 3 .14.19 2 3.05 4.86 4.28.68.29 1.21.46 1.62.59.68.22 1.29.19 1.78.11.54-.08 1.7-.69 1.94-1.36.24-.67.24-1.24.17-1.36-.07-.12-.26-.19-.55-.33Z'/></svg>");
    background-repeat:no-repeat; background-position:center; background-size:14px 14px;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.08);
  }
  @media (max-width:900px){
    .lang-flags a.flag-whatsapp{ width:20px; height:20px; background-size:13px 13px }
  }
  @media (max-width:520px){
    .lang-flags a.flag-whatsapp{ width:18px; height:18px; background-size:12px 12px }
  }
}

/* Sub-breakpoint muy estrecho: mantener mismas proporciones que en home */
@media (max-width: 560px){
  .brand{ width: auto; max-height: 112px; margin-left: 0 }
  .brand img{ width:auto; height:auto; max-height: 110px }
  /* Evitar centrado que puede desalinear el email/hamburguesa; mantener alineación a la derecha del grid */
  .cta{ justify-content: start }
}
.faq-mini .more-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;margin:6px 0 14px;padding:6px 14px;border:1px solid rgba(0,0,0,0.15);border-radius:999px;color:#333;background:#fff;transition:transform .15s, border-color .35s, box-shadow .35s; position:relative}
.faq-mini .more-link::before{content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .35s, box-shadow .35s; pointer-events:none}
.faq-mini .more-link:hover,.faq-mini .more-link:focus-visible,.faq-mini .more-link:active{border-color:#D4AF37;color:#000;box-shadow:0 4px 14px -6px rgba(0,0,0,0.25); transform:translateY(-1px)}
.faq-mini .more-link:hover::before,.faq-mini .more-link:focus-visible::before,.faq-mini .more-link:active::before{opacity:1; box-shadow:0 0 0 2px rgba(212,175,55,0.45),0 4px 12px -4px rgba(212,175,55,0.45)}
/* Variante más ligera para páginas de zona */

/* ===== Zonas: títulos centrados solo en móvil ===== */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1280px){
  /* Los index de zonas usan un bloque #intro con el H1 principal */
  main.container #intro h1{ text-align: center !important; }
  /* Piloto Read-More (zonas, móvil): clamping elegante del texto sin quitar contenido */
  main.container #intro p.zone-read-clamp{ position:relative; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow:hidden; }
  main.container #intro p.zone-read-clamp::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3.2em; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 65%); }
  main.container #intro .zone-readmore-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:13px; margin:8px 0 2px; padding:6px 14px; border:1px solid rgba(0,0,0,0.15); border-radius:999px; color:#333; background:#fff; transition:transform .15s, border-color .35s, box-shadow .35s; position:relative }
  main.container #intro .zone-readmore-toggle::before{ content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .35s, box-shadow .35s; pointer-events:none }
  main.container #intro .zone-readmore-toggle:hover,
  main.container #intro .zone-readmore-toggle:focus-visible,
  main.container #intro .zone-readmore-toggle:active{ border-color:#D4AF37; color:#000; box-shadow:0 4px 14px -6px rgba(0,0,0,0.25); transform:translateY(-1px) }
  main.container #intro .zone-readmore-toggle:hover::before,
  main.container #intro .zone-readmore-toggle:focus-visible::before,
  main.container #intro .zone-readmore-toggle:active::before{ opacity:1; box-shadow:0 0 0 2px rgba(212,175,55,0.45),0 4px 12px -4px rgba(212,175,55,0.45) }
}
.faq-soft{background:#f9f9fa;border:1px solid #e4e6e8;box-shadow:0 4px 14px -6px rgba(0,0,0,0.05);}
.faq-soft h2{background:none;-webkit-background-clip:initial;background-clip:initial;color:#222;font-size:clamp(17px,2vw,22px);}
.faq-soft dt{color:#222;font-size:14px}
.faq-soft dd{font-size:13px;color:#555}
.faq-soft{padding:24px 26px 4px;border-radius:22px}

/* Alineación derecha unificada para el botón único en ficha zona */
.contact-cta.right{justify-content:flex-end;text-align:right;}
@media (max-width:680px){
  .faq-mini{padding:26px 20px 6px;border-radius:22px}
  .faq-mini h2{font-size:20px}
  .faq-mini dt{font-size:14px}
  .faq-mini dd{font-size:13px}
}

.zone-showcase .image-side {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  height: 100%;
}

.zone-showcase .image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

.zone-showcase .content-side {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  border: 1px solid #eee;
}

.zone-showcase .zone-title {
  margin: 0 0 15px;
  font-size: 20px;
  color: #111;
}

.zone-showcase .service-list {
  margin: 0;
  padding-left: 20px;
  color: #444;
}

.zone-showcase .service-list li {
  margin: 8px 0;
  position: relative;
  padding-left: 5px;
}

@media (max-width:850px) {
  .zone-showcase {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* (Revertido) Estilos de colapsado/desvanecimiento en ficha de zona eliminados hasta confirmar ubicación */
.map-container iframe{width:100%;height:400px;border:0}
footer.site{background:#0a0a0a;color:#ddd;padding:22px 0;margin-top:30px}
footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
footer .footer-content{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:25px;padding-left:20px}
footer h4{color:#fff;margin:0 0 6px}
footer a{color:#ddd}
.legal{border-top:1px solid #222;margin-top:16px;padding-top:12px;font-size:14px}
footer .footer-has-logo{display:flex;align-items:center;gap:30px;margin-right:15px}
footer .footer-logo{flex:0 0 120px;width:120px;height:120px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9;transition:opacity .3s,transform .3s}
footer .footer-logo-link:hover .footer-logo{opacity:1;transform:scale(1.05)}
footer .footer-txt{display:flex;flex-direction:column;justify-content:center;max-width:460px}
footer p {margin: 0 0 5px;}
@media (max-width:900px){
  footer .footer-has-logo{gap:25px}
  footer .footer-content{grid-template-columns:2fr 1fr 1fr;gap:20px}
  footer .footer-logo{width:110px;height:110px}
}
@media (max-width:680px){
  footer .footer-has-logo{flex-direction:row;align-items:flex-start}
  footer .footer-logo{width:100px;height:100px}
  footer .footer-txt h4{margin-top:4px}
  footer .footer-content{grid-template-columns:1fr 1fr;gap:20px;padding-left:15px}
}
/* Regla anterior eliminada para no interferir con el grid móvil del header */
@media (max-width:500px){
  footer .footer-has-logo{flex-direction:column;align-items:flex-start;gap:15px}
  footer .footer-logo{width:90px;height:90px}
  footer .footer-content{grid-template-columns:1fr;gap:18px;padding-left:10px}
}

/* Evitar corte entre "e" y "HI-MACS®" */
.hero p.lead strong {
  display: inline-block;
}

/* Solo móvil: Intro de zonas con desvanecimiento y botón Saber más */
@media (max-width: 1024px){
  #intro p.intro-collapsible{ position:relative; display:block; max-height: 8.4em; overflow:hidden; }
  #intro p.intro-collapsible::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2.6em;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.96));
    pointer-events:none;
  }
  #intro p.intro-collapsible.is-expanded{ max-height:none; overflow:visible; }
  #intro p.intro-collapsible.is-expanded::after{ display:none; }

  .intro-readmore-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; margin-top:10px; padding:10px 12px; border:1px solid rgba(0,0,0,0.08);
    border-radius:12px; cursor:pointer; background:#fff; color:#111; font-weight:600;
    box-shadow:0 2px 6px rgba(0,0,0,0.06); transition:transform .15s, box-shadow .2s, border-color .2s;
  }
  .intro-readmore-btn:hover,.intro-readmore-btn:active{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,0.10); border-color:var(--gold); }
  .intro-readmore-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
}