/* Estilos únicos para la demo de yates */
:root{
  --pastel:#f6f7fb;
  --brand:#0ea5e9; /* azul mediterráneo */
  --brand-dark:#0a6fb5;
}
.bg-pastel{background:var(--pastel);} 
.img-cover-100pc{object-fit:cover; width:100%; height:auto;}
.section-journey{font-size:.85rem; letter-spacing:.08em; color:#6c757d; text-transform:uppercase;}
.glass{background:rgba(255,255,255,.65); border:1px solid rgba(0,0,0,.06); border-radius:.75rem; backdrop-filter:blur(6px); overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.08);} 
.glass-white-back{background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.06); border-radius:.75rem; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.06);} 
.bg-white_backdrop{background:rgba(255,255,255,.6);} 
.py-5pc{padding-top:5%; padding-bottom:5%;}




.chatbot-button {
  background: linear-gradient(135deg,#14b8a6,#0ea5e9);
}
/* Spacing helpers (extensión) */
.pb-6{padding-bottom:4rem;} /* extra separación para secciones largas */
.content-section{padding-bottom:clamp(2rem, 5vw, 4rem);} 

/* Helpers de fondo */
.bg-cover{background-size:cover; background-position:center; background-repeat:no-repeat;}

/* Helpers de tipografía/recorte */
.line-clamp-2{display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.line-clamp-3{display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}

/* Animaciones (Canvas + Animate.css) */
[data-animate]{opacity:0;} /* oculto hasta que functions.bundle.js añada clases */
.animated{opacity:1 !important;}

/* Header premium */
.hero-announcement{padding:1.1rem 0 1rem; background:linear-gradient(180deg, rgba(14,165,233,.06), rgba(14,165,233,.02)); border-bottom:1px solid rgba(2,6,23,.06);} 
.badge-demo{display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem; border-radius:999px; background:linear-gradient(135deg,#14b8a6,#0ea5e9); color:#fff; font-weight:600; font-size:.8rem; box-shadow:0 10px 24px rgba(14,165,233,.25);} 
.display-lux{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; font-weight:700; letter-spacing:.01em; font-size:clamp(1.6rem, 3.2vw, 2.6rem);} 
.subhead-lux{color:#475569; font-size:clamp(1rem, 1.6vw, 1.125rem);} 
.header-lux{position:sticky; top:0; z-index:1030; background:rgba(255,255,255,.75); backdrop-filter:blur(10px); border-bottom:1px solid rgba(0,0,0,.06);} 
.header-lux .brand{font-weight:700; letter-spacing:.02em; color:#0f172a;}
.nav-lux a{padding:.5rem .85rem; border-radius:999px; color:#0f172a; text-decoration:none;}
.nav-lux a:hover{background:rgba(2,6,23,.06);} 
.btn-gradient{background:linear-gradient(135deg, #14b8a6, #0ea5e9); color:#fff; border:0; box-shadow:0 10px 20px rgba(20,184,166,.25);} 
.btn-gradient:hover{filter:brightness(.97);} 

/* Listado */
.filters-sticky{position:sticky; top:1rem;}
.card-boat .price{font-weight:600;}
.card-boat{border-radius:1rem; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.08); transition:transform .3s ease, box-shadow .3s ease;} 
.card-boat:hover{transform:translateY(-4px); box-shadow:0 20px 44px rgba(0,0,0,.16);} 
.glass .ratio{min-height:220px;} /* altura visual consistente en destacadas */
.sticky-cta{position:sticky; top:1rem; background:#fff; border-top:1px solid #eee; padding:.75rem;}

/* Cards destacadas clicables */
.card-featured{border-radius:1rem; overflow:hidden; background:#fff; box-shadow:0 14px 32px rgba(0,0,0,.12); transition:transform .3s ease, box-shadow .3s ease;}
.card-featured:hover{transform:translateY(-6px); box-shadow:0 22px 56px rgba(0,0,0,.22);} 
.card-featured a{color:inherit; text-decoration:none; display:block;}
.card-featured .featured-media{position:relative;}
.card-featured .featured-media .badge{position:absolute; top:.5rem; left:.5rem; z-index:2;}
.card-featured .featured-media .badge-right{right:.5rem; left:auto;}
.card-featured .icon-list i{color:var(--brand);}

/* Ficha */
.hero-boat{min-height:320px; background:#e9ecef; border-radius:.75rem;}
.specs li{margin-bottom:.25rem;}

/* Experiencias con imagen de fondo y overlay */
.service-card{position:relative; border-radius:1rem; color:#fff; background:#1f2937; overflow:hidden; box-shadow:0 14px 32px rgba(0,0,0,.18); background-size:cover; background-position:center; background-repeat:no-repeat; min-height:280px; transition:transform .35s ease, box-shadow .35s ease;} 
.service-card::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.55));}
.service-card > *{position:relative; z-index:1;}
.service-card:hover{transform:translateY(-4px); box-shadow:0 20px 42px rgba(0,0,0,.24);} 

/* Hero split */
#hero-yates{position:relative;}
#hero-yates .glass-white-back{backdrop-filter:blur(6px);} 
.glass-elevated{border:1px solid rgba(2,6,23,.08); border-radius:1rem; box-shadow:0 20px 48px rgba(2,6,23,.18);} 
.hero-title{font-size:clamp(1.5rem, 3vw, 2.1rem); font-weight:700; letter-spacing:.01em; color:#06283D;}

/* Hero con fondo difuminado + overlay temático */
#hero-yates.hero-with-bg{
  position:relative;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
#hero-yates.hero-with-bg::before{
  content:""; position:absolute; inset:0; z-index:0;
  backdrop-filter:blur(1.7px);
  -webkit-backdrop-filter:blur(1.7px);
  background:linear-gradient(180deg, rgba(10,23,55,.35), rgba(10,23,55,.15)); /* default suave */
}
#hero-yates.hero-with-bg > .container{ position:relative; z-index:1; }

/* Galería superpuesta en el hero (look lujoso) */
.hero-gallery{position:relative; height:clamp(280px, 44vh, 460px);} 
.hero-gallery .hero-photo-main{position:absolute; right:0; bottom:0; width:72%; height:78%; object-fit:cover; border-radius:18px; box-shadow:0 24px 56px rgba(0,0,0,.35);} 
.hero-gallery .hero-photo-secondary{position:absolute; left:0; top:0; width:48%; height:54%; object-fit:cover; border-radius:14px; box-shadow:0 20px 48px rgba(0,0,0,.28); transform:translate(-6%, -6%);} 
@media (max-width: 991px){
  .hero-gallery{height:auto;}
  .hero-gallery .hero-photo-main{position:relative; width:100%; height:auto;}
}

/* Ajustes móviles para la imagen secundaria: visible, apilada y flotando */
@media (max-width: 991px){
  .hero-gallery .hero-photo-secondary{
    position:absolute; 
    width:58%; 
    height:auto; 
    top:6%; 
    left:4%; 
    transform:none; 
    border-radius:12px;
  }
  .hero-gallery .hero-photo-secondary.floating{ animation-name: floatY; }
}

/* Animación flotante para mini-galería del hero */
.floating { animation: floatY 10s ease-in-out infinite; will-change: transform; }
.floating-slow { animation-duration: 14s; }
.floating-reverse { animation-direction: alternate-reverse; }

/* La secundaria ya tiene un transform base: lo preservamos en los keyframes */
.hero-gallery .hero-photo-secondary.floating {
  /* Solo cambiamos el nombre; duración/dirección las hereda de .floating y variantes */
  animation-name: floatYSecondary;
}

/* Reforzamos override móvil (debajo para ganar precedencia) */
@media (max-width: 991px){
  .hero-gallery .hero-photo-secondary.floating{ animation-name: floatY !important; }
}

@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

@keyframes floatYSecondary {
  0% { transform: translate(-6%, -6%) translateY(0); }
  50% { transform: translate(-6%, -6%) translateY(-10px); }
  100% { transform: translate(-6%, -6%) translateY(0); }
}

/* Variantes de tema para el overlay */
#hero-yates.hero-with-bg.theme-light::before{ background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10)); }
#hero-yates.hero-with-bg.theme-blue::before{ background:linear-gradient(180deg, rgba(10,23,55,.25), rgba(10,23,55,.15)); }
#hero-yates.hero-with-bg.theme-black::before{ background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.15)); }
#hero-yates.hero-with-bg.theme-sunset::before{ background:linear-gradient(180deg, rgba(54, 55, 10, 0.25), rgba(55, 37, 10, 0.15)); }

/* utilidades */
.shadow-soft{box-shadow:0 12px 22px rgba(0,0,0,.08);} 

/* Barra sticky móvil global */
.mobile-sticky-bar{position:fixed; left:0; right:0; bottom:0; z-index:1035; background:#fff; border-top:1px solid rgba(0,0,0,.08); box-shadow:0 -8px 20px rgba(0,0,0,.06); padding:.5rem .75rem; display:none;}
.mobile-sticky-bar .btn{border-radius:999px;}
@media (max-width: 768px){
  .mobile-sticky-bar{display:block;}
  body{padding-bottom:4.25rem;} /* espacio para la barra sticky */
}

/* Prefooter banner */
.prefooter-banner{
  width:100%;
  height:clamp(140px, 30vh, 320px); /* ~300px en desktop, menos en móviles */
  background-image:url('/alquiler_yates/img/Sintesia_ia_yates_68507_.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  margin-top:2rem; /* separa de la sección anterior para evitar sensación de solapamiento */
  display:block; clear:both; position:relative; z-index:0;
}
@media (max-width: 768px){
  .prefooter-banner{ height:clamp(120px, 22vh, 220px); }
}

/* Mosaico asimétrico con CSS Grid */
.asymmetric-mosaic { display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(180px, auto); gap:12px; }
.asymmetric-mosaic .tile{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.12); }
.asymmetric-mosaic .tile .ph{ display:block; width:100%; height:100%; background-size:cover; background-position:center; }
.asymmetric-mosaic .tile .cap{ position:absolute; left:12px; bottom:10px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.4); font-weight:600; }
.asymmetric-mosaic .tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.25)); }
.asymmetric-mosaic .tile.tall{ grid-row:span 2; }
.asymmetric-mosaic .tile.wide{ grid-column:span 2; }
@media (max-width: 768px) { .asymmetric-mosaic { grid-template-columns:repeat(2, 1fr); } .asymmetric-mosaic .tile.wide{ grid-column:span 2; } }

/* Carrusel panorámico con scroll-snap (entre destacados e inspírate) */
.panorama-strip{ display:flex; overflow-x:auto; gap:12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px; -ms-overflow-style:none; scrollbar-width:none; touch-action: pan-x; overscroll-behavior-x: contain; cursor:grab; }
.panorama-strip::-webkit-scrollbar{ width:0; height:0; display:none; }
.panorama-strip::-webkit-scrollbar-thumb{ background:transparent; }
.panorama-item{ flex:0 0 auto; width:clamp(240px, 36vw, 520px); aspect-ratio:21 / 9; border-radius:16px; overflow:hidden; position:relative; box-shadow:0 12px 28px rgba(0,0,0,.12); background-size:cover; background-position:center; scroll-snap-align:center; cursor:zoom-in; }
.panorama-strip.dragging{ cursor:grabbing; }
.panorama-item, .panorama-strip{ user-select:none; -webkit-user-drag:none; }
.panorama-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.25)); }
.panorama-item .cap{ position:absolute; left:12px; bottom:10px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.4); font-weight:600; }
@media (max-width: 768px){ .panorama-item{ width:78vw; } }

.panorama-full-bleed { width:100%; overflow-x:hidden; position:relative; }
.panorama-full-bleed .panorama-strip {
  padding-left:max(12px, calc((100vw - 1296px) / 2)); /* 1296px = container-xl width */
  padding-right:max(12px, calc((100vw - 1296px) / 2));
}
.panorama-full-bleed .panorama-strip .panorama-item:first-child{ scroll-snap-align:start; }
.panorama-full-bleed .panorama-strip .panorama-item:last-child{ scroll-snap-align:end; }

/* Botones de navegación del carrusel panorámico */
#panoramicas .panorama-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.95); border:0; box-shadow:0 10px 24px rgba(0,0,0,.15); }
#panoramicas .panorama-nav.prev{ left:max(12px, calc((100vw - 1296px) / 2 - 22px)); }
#panoramicas .panorama-nav.next{ right:max(12px, calc((100vw - 1296px) / 2 - 22px)); }
@media (max-width: 768px){ #panoramicas .panorama-nav{ width:38px; height:38px; } }

/* Lightbox panorámico */
#panoramaLightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:1050; padding:4vw; }
#panoramaLightbox.open{ display:flex; }
#panoramaLightbox img{ max-width:92vw; max-height:86vh; border-radius:12px; box-shadow:0 16px 48px rgba(0,0,0,.5); }
#panoramaLightbox .caption{ color:#fff; margin-top:12px; text-align:center; font-weight:500; }
#panoramaLightbox .close{ position:absolute; top:16px; right:16px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.95); display:flex; align-items:center; justify-content:center; font-size:1.25rem; }

/* --- Estilos migrados desde alquiler_yates/ficha.php --- */
/* Galería */
.gallery-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.main-image-container {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.main-image-container:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.thumbnails { margin-top: 12px; }

.thumb-btn {
  transition: all 0.3s ease;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.thumb-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  opacity: 1 !important;
}

.thumb-container:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.thumb-container.active { border-color: #4c6ef5; box-shadow: 0 0 0 2px rgba(76, 110, 245, 0.3); }
.thumb-container img { transition: transform 0.3s ease; }
.thumb-container:hover img { transform: scale(1.05); }

/* duplicado intencional para preservar orden original */
.main-image-container {
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.thumb-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  border: none !important;
  padding: 2px;
}
.thumb-btn:hover .thumb-container { border-color: #4c6ef5 !important; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(76, 110, 245, 0.2); }
.thumb-btn:hover .thumb-overlay { opacity: 0.3; }
.thumb-btn.active .thumb-container { border-color: #4c6ef5 !important; box-shadow: 0 0 0 2px rgba(76, 110, 245, 0.3); transform: translateY(-3px); }

.thumb-container { position: relative; overflow: hidden; border-radius: 6px; border: 2px solid transparent; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.thumb-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); opacity: 0; transition: all 0.3s ease; }

/* Estrellas */
.rating-stars { display: inline-flex; gap: 2px; }
.rating-stars i { color: #ffc107; text-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.main-image-container:hover img { transform: scale(1.02); }

/* Iconos de características y cards */
.feature-item { transition: all 0.3s ease; padding: 8px 0; }
.feature-item:hover { transform: translateX(4px); }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%); margin-right: 12px; color: #4c6ef5; font-size: 1.1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.feature-item { transition: all 0.3s ease; padding: 14px 16px; border-radius: 12px; background: #fff; height: 100%; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.feature-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); border-color: rgba(76, 110, 245, 0.2); }
.feature-item:hover .feature-icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.feature-icon { width: 44px; height: 44px; border-radius: 14px; margin-right: 14px; font-size: 1.2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); flex-shrink: 0; position: relative; overflow: hidden; }
.feature-icon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 100%); opacity: 0.8; transition: all 0.3s ease; }
.feature-icon i { position: relative; z-index: 1; }

/* Price tag */
.price-tag { background: linear-gradient(135deg, rgba(76, 110, 245, 0.1) 0%, rgba(59, 91, 219, 0.15) 100%); padding: 8px 16px; border-radius: 12px; text-align: center; line-height: 1.2; border: 1px solid rgba(76, 110, 245, 0.2); box-shadow: 0 2px 8px rgba(76, 110, 245, 0.1); }
.price-tag strong { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.5px; background: linear-gradient(135deg, #4c6ef5 0%, #3b5bdb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Iconos modernos con colores */
.icon-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }
.icon-primary i { color: #fff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.icon-success { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); border: none; box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4); }
.icon-success i { color: #fff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.icon-info { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }
.icon-info i { color: #fff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.icon-warning { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border: none; box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4); }
.icon-warning i { color: #fff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.icon-danger { background: linear-gradient(135deg, #fc466b 0%, #3f5efb 100%); border: none; box-shadow: 0 4px 15px rgba(252, 70, 107, 0.4); }
.icon-danger i { color: #fff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* Paquete todo incluido */
.package-icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color:#fff; font-size:1.4rem; box-shadow: 0 6px 20px rgba(17, 153, 142, 0.4), 0 2px 8px rgba(0,0,0,0.1); position:relative; overflow:hidden; transition: all 0.3s ease; }
.package-icon::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%); transform: rotate(-45deg); animation: shimmer 2s infinite; }
.package-icon::after { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.4) 100%); opacity:0.8; }
.package-icon i { position:relative; z-index:2; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
@keyframes shimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(-45deg);} 100% { transform: translateX(100%) translateY(100%) rotate(-45deg);} }

/* Acordeón */
.accs-item { border:none; border-radius:16px; overflow:hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom:16px; background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08); }
.accs-header { padding:20px; cursor:pointer; transition: all 0.3s ease; background:#fff; border:none; position:relative; display:flex; align-items:center; }
.accs-header:hover { background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%); transform: translateY(-1px); box-shadow: 0 6px 25px rgba(0,0,0,0.08); }
.accs-header.active { background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%); color:#4c6ef5; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
.acc-icon { width:20px; height:20px; display:flex; align-items:center; justify-content:center; margin-right:15px; transition: transform 0.3s ease; color:#667eea; }
.accs-header.active .acc-icon { transform: rotate(180deg); }
.acc-title { font-weight:600; color:#1e293b; margin:0; font-size:1.125rem; letter-spacing:-0.025em; line-height:1.4; }
.accs-content { max-height:0; overflow:hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); }
.accs-content.active { padding:24px; border-top:1px solid rgba(226, 232, 240, 0.5); }
.accs-content .inner { padding: 0 20px 20px 55px; }

/* Botones modernos */
.btn-modern-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border:none; color:#fff; font-weight:600; padding:12px 24px; border-radius:12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); position:relative; overflow:hidden; }
.btn-modern-primary::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition:left 0.5s; }
.btn-modern-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); color:#fff; }
.btn-modern-primary:hover::before { left:100%; }
.btn-modern-secondary { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border:none; color:#fff; font-weight:600; padding:8px 16px; border-radius:20px; transition: all 0.3s ease; box-shadow: 0 3px 10px rgba(240, 147, 251, 0.3); font-size:0.875rem; }
.btn-modern-secondary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4); color:#fff; }
.btn-modern-outline { background: rgba(255, 255, 255, 0.1); border:2px solid rgba(102, 126, 234, 0.3); color:#667eea; font-weight:600; padding:10px 20px; border-radius:12px; transition: all 0.3s ease; backdrop-filter: blur(10px); }
.btn-modern-outline:hover { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-color:transparent; color:#fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3); }

/* Iconos de sección */
.section-icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; font-size:1.3rem; position:relative; overflow:hidden; transition: all 0.3s ease; }
.section-icon::after { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.4) 100%); opacity:0.8; }
.section-icon i { position:relative; z-index:1; color:#fff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.section-icon:has(.fa-map-marked-alt) { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }
.section-icon:has(.fa-comments) { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4); }
.section-icon:has(.fa-question-circle) { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4); }
.section-icon:has(.fa-ship) { background: linear-gradient(135deg, #fc466b 0%, #3f5efb 100%); box-shadow: 0 4px 15px rgba(252, 70, 107, 0.4); }
.section-icon:has(.fa-gas-pump) { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4); }

/* Badges */
.badge-modern-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; border:none; font-weight:600; padding:8px 12px; border-radius:20px; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); }
.badge-modern-info { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color:#fff; border:none; font-weight:600; padding:8px 12px; border-radius:20px; box-shadow: 0 2px 8px rgba(17, 153, 142, 0.3); }
.badge-modern-success { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color:#fff; border:none; font-weight:600; padding:8px 12px; border-radius:20px; box-shadow: 0 2px 8px rgba(240, 147, 251, 0.3); }

/* Especificaciones */
.spec-item { display:flex; align-items:center; padding:20px; background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); border-radius:16px; border:none; box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: all 0.3s ease; margin-bottom:16px; }
.spec-item:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.spec-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; margin-right:16px; font-size:1.2rem; position:relative; overflow:hidden; transition: all 0.3s ease; flex-shrink:0; }
.spec-icon::after { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.4) 100%); opacity:0.8; }
.spec-icon i { position:relative; z-index:1; color:#fff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.spec-icon:has(.fa-ship) { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }
.spec-icon:has(.fa-users) { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4); }
.spec-icon:has(.fa-anchor) { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4); }
.spec-icon:has(.fa-star) { background: linear-gradient(135deg, #fc466b 0%, #3f5efb 100%); box-shadow: 0 4px 15px rgba(252, 70, 107, 0.4); }
.spec-item:hover .spec-icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }

/* CTA Moderno */
.cta-modern { position:relative; border-radius:24px; overflow:hidden; padding:40px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); transition: all 0.3s ease; }
.cta-modern:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0,0,0,0.15); }
.cta-background { position:absolute; inset:0; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); opacity:1; }
.cta-background::before { content:''; position:absolute; inset:0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat; opacity:0.3; }
.cta-content { position:relative; z-index:2; }
.cta-title { color:#fff; font-size:1.75rem; font-weight:700; margin-bottom:8px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); letter-spacing:-0.025em; }
.cta-subtitle { color: rgba(255,255,255,0.9); font-size:1.1rem; margin-bottom:16px; line-height:1.5; }
.cta-features { display:flex; gap:20px; flex-wrap:wrap; }
.cta-feature { display:flex; align-items:center; gap:8px; color: rgba(255,255,255,0.95); font-size:0.9rem; font-weight:500; }
.cta-feature i { color: rgba(255,255,255,0.8); font-size:0.85rem; }
.btn-cta-modern { display:inline-flex; align-items:center; gap:12px; background: rgba(255,255,255,0.95); color:#667eea; padding:16px 32px; border-radius:50px; text-decoration:none; font-weight:700; font-size:1.1rem; box-shadow: 0 8px 25px rgba(0,0,0,0.15); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden; backdrop-filter: blur(10px); border:2px solid rgba(255,255,255,0.3); }
.btn-cta-modern:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 15px 35px rgba(0,0,0,0.2); color:#764ba2; text-decoration:none; }
.btn-cta-icon { display:flex; align-items:center; justify-content:center; width:24px; height:24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; border-radius:50%; font-size:0.9rem; transition: all 0.3s ease; }
.btn-cta-modern:hover .btn-cta-icon { transform: rotate(15deg) scale(1.1); }
.btn-cta-text { position:relative; z-index:2; }
.btn-cta-shine { position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition:left 0.6s; }
.btn-cta-modern:hover .btn-cta-shine { left:100%; }
@media (max-width: 768px){ .cta-modern{padding:30px 20px;} .cta-title{font-size:1.5rem;} .cta-subtitle{font-size:1rem;} .cta-features{justify-content:center; margin-bottom:20px;} .btn-cta-modern{width:100%; justify-content:center; padding:18px 24px;} }

/* Ajustes de iconos por color */
.text-success i, .text-primary i, .text-info i, .text-warning i { transition: all 0.3s ease; }
.text-success i { color:#22c55e !important; }
.text-primary i { color:#4c6ef5 !important; }
.text-info i { color:#3b82f6 !important; }
.text-warning i { color:#f59e0b !important; }

/* Utilidades nuevas para reemplazar inline */
.card-soft { background: rgba(255, 255, 255, 0.7); border-radius: 12px; padding: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); }
.main-image-container { height: 350px; }
.main-image-container img { width:100%; height:100%; object-fit: cover; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.thumb-container { height: 80px; }
.thumb-container img { width:100%; height:100%; object-fit: cover; }
.map-icon { font-size: 3rem; }
.similar-thumb { height: 60px; object-fit: cover; }

/* Hero con fondo difuminado + overlay temático para hero-boat */
#hero-boat.hero-with-bg{ position:relative; background-size:cover; background-position:center; background-repeat:no-repeat; }
#hero-boat.hero-with-bg::before{ content:""; position:absolute; inset:0; z-index:1; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); background:linear-gradient(180deg, rgba(10,23,55,.35), rgba(10,23,55,.15)); }
#hero-boat.hero-with-bg > .container{ position:relative; z-index:2; }
#hero-boat .hero-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
#hero-boat.hero-with-bg.theme-light::before{ background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10)); }
#hero-boat.hero-with-bg.theme-blue::before{ background:linear-gradient(180deg, rgba(10,23,55,.25), rgba(10,23,55,.15)); }
#hero-boat.hero-with-bg.theme-black::before{ background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.15)); }

/* CTA ancha con imagen de fondo y gradiente */
.cta-wide{ position:relative; border-radius:20px; overflow:hidden; box-shadow:0 20px 48px rgba(0,0,0,.16); }
.cta-wide .bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02); }
.cta-wide .overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.15)); }
.cta-wide .content{ position:relative; z-index:2; color:#fff; padding:clamp(20px, 5vw, 48px); }
.cta-wide .title{ font-size:clamp(1.4rem, 3vw, 2rem); font-weight:700; letter-spacing:-.02em; margin-bottom:.35rem; }
.cta-wide .subtitle{ color:rgba(255,255,255,.9); margin-bottom:1rem; }
.cta-wide .btn{ border-radius:999px; }

/* Grid de inspiración */
.inspiration-grid .tile{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.12); }
.inspiration-grid .tile .ph{ display:block; width:100%; padding-top:66%; background-size:cover; background-position:center; }
.inspiration-grid .tile .cap{ position:absolute; left:12px; bottom:10px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.4); font-weight:600; }
.inspiration-grid .tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.25)); }