@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
  --navy: #2C3E6B;
  --navy-dark: #1a2a4d;
  /* acento de marca: naranja. Antes era dorado (#D4A843 / #b8922e). */
  --accent: #F4761F;
  --accent-hover: #d85f0c;
  --white: #ffffff;
  --light-bg: #f5f5f5;
  --text: #333333;
  --text-light: #666666;
  --text-muted: #888888;
  --border: #e0e0e0;
  --whatsapp: #25D366;
  --star: #FFD700;
  /* flecha diagonal de punta cuadrada: se pinta como mascara en ::after,
     asi hereda el color del boton y no hay que tocar las plantillas */
  --ar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 9 9 3M9 3H4.2M9 3v4.8' stroke='%23000' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; display: block; }

/* ============ BOTONES (lenguaje Neo, en cuadrado) ============
   Caja recta sin redondeo, Montserrat 600 con el tracking del h1
   (-1px sobre 48px = -0.021em), flecha diagonal a la derecha y hover de
   .18s que oscurece y levanta 2 px. */
.btn-contact, .btn-whatsapp, .btn-outline, .btn-book, .btn-send {
  border-radius: 0;
  font-weight: 600;
  letter-spacing: -0.021em;
  text-transform: none;
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.btn-contact::after, .btn-whatsapp::after, .btn-outline::after,
.btn-book::after, .btn-send::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--ar) center / contain no-repeat;
  mask: var(--ar) center / contain no-repeat;
}
.btn-contact::after { width: 10px; height: 10px; }

/* La luz que recorre el borde. Regla de color: si el boton es naranja la
   luz es navy; si el boton es navy, la luz es naranja. Va envuelta en
   .btn-glow y solo en el boton principal de cada pantalla. */
@property --snake-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes btn-snake { to { --snake-a: 360deg; } }

.btn-glow {
  position: relative;
  display: inline-flex;
  isolation: isolate;
  --snake: rgba(44,62,107,.95);      /* navy: el boton de debajo es naranja */
  --snake-halo: rgba(44,62,107,.4);
}
.btn-glow.is-full { display: block; }
.btn-glow.on-navy {                  /* boton navy: la luz pasa a naranja */
  --snake: rgba(244,118,31,.95);
  --snake-halo: rgba(244,118,31,.4);
}
.btn-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  padding: 2px;
  pointer-events: none;
  z-index: 3;
  background: conic-gradient(from var(--snake-a),
              transparent 0 74%, var(--snake) 93%, #fff 98.5%, transparent 99%);
  animation: btn-snake 3.2s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.btn-glow { filter: drop-shadow(0 0 5px var(--snake-halo)); }
.btn-glow > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .btn-glow::before { animation: none; opacity: 0; }
}

/* HEADER */
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 40px;
  height: 64px;
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-logo {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.1;
  text-decoration: none;
}
.header-logo-badge { display: block; width: 38px; height: 38px; flex-shrink: 0; }
.header-logo-text {
  font-weight: 700;
  font-size: 13px;
  color: var(--white);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.header-logo-main {
  font-weight: 700;
  font-size: 11px;
  color: var(--white);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.header-logo-sub {
  font-size: 9px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.header-logo-sub span { color: var(--accent); }
.header-nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.header-nav a {
  position: relative;
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color 0.2s;
}
.header-nav a:hover,
.header-nav a.active { color: var(--accent); }
/* la pagina en la que estas lleva ademas una raya fina debajo */
.header-nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--accent);
}
.lang { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  opacity: 0.85;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color .18s ease, opacity .18s ease;
}
.lang-btn:hover,
.lang-btn[aria-expanded="true"] { color: var(--accent); opacity: 1; }
.lang-caret { width: 10px; height: 10px; flex-shrink: 0; transition: transform .18s ease; }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 132px;
  padding: 4px 0;
  list-style: none;
  background: var(--navy-dark);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.7);
}
.lang-menu a {
  display: block;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.lang-menu a:hover { background: rgba(255,255,255,0.07); color: var(--accent); }
/* Bandera recortada en circulo: el logo es un circulo, asi que el selector
   de idioma rima con la marca en vez de parecer un anadido. El recorte se
   acepta a cambio (la britanica pierde las esquinas). */
.flag-round {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}
.flag-round .flag { display: block; width: 18px; height: 18px; }
.lang-menu .flag-round { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.lang-code { letter-spacing: .3px; }
.lang-menu a { display: flex; align-items: center; gap: 10px; }
.mobile-nav a.mn-lang { display: flex; align-items: center; gap: 12px; }
/* el idioma en el que ya estas no se ofrece como novedad: solo se marca */
.lang-menu a.is-current { color: var(--accent); }
.btn-contact {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: var(--accent);
  color: var(--white);
  font-size: 12px;
  text-decoration: none;
}
/* el del header no salta: esta fijo y el salto se nota demasiado */
.btn-contact:hover { background: var(--accent-hover); color: var(--white); }

/* MOBILE NAV */
.hamburger {
  grid-column: 3;
  justify-self: end;
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.hamburger svg { display: block; }
.mobile-nav {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--navy-dark);
  padding: 20px;
  z-index: 99;
  flex-direction: column;
  gap: 16px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* HERO */
.hero {
  background: linear-gradient(rgba(44,62,107,0.55), rgba(26,42,77,0.65)), url('/images/day-yacht-charter-mallorca.webp') center/cover no-repeat;
  padding: 120px 40px 140px;
  text-align: center;
}
.hero h1 {
  font-weight: 600;
  font-size: 48px;
  color: var(--white);
  margin-bottom: 20px;
  line-height: 1.05;
  letter-spacing: -1px;
}
.hero p {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 40px;
  font-weight: 300;
}
.hero-buttons {
  display: flex;
  align-items: center;   /* sin esto, si un boton parte en dos lineas el otro se estira */
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 26px 10px 14px;
  background: var(--whatsapp);
  color: var(--white);
  font-size: 14px;
}
.btn-whatsapp:hover { background: #20bd5a; color: var(--white); transform: translateY(-2px); }
/* el icono blanco sobre verde se perdia: disco blanco con el simbolo verde */
.btn-whatsapp svg {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  padding: 4px;
  border-radius: 50%;
  background: var(--white);
  fill: var(--whatsapp);
  flex-shrink: 0;
  transition: fill .18s ease;
}
.btn-whatsapp:hover svg { fill: #20bd5a; }
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 26px;
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--white);
  font-size: 14px;
  font-weight: 400;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
  color: var(--white);
}

/* HERO SMALL */
.hero-sm {
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  padding: 64px 40px 72px;
  text-align: center;
}
.hero-sm h1 {
  font-weight: 600;
  font-size: 40px;
  color: var(--white);
  margin-bottom: 12px;
}
.hero-sm p {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 500;
}

/* YACHT GRID */
.yacht-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 64px 120px;
}
.yacht-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}
.yacht-card:hover {
  color: inherit;
}
.yacht-card-img {
  height: 260px;
  position: relative;
  overflow: hidden;
}
.yacht-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yacht-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}
.yacht-card-name {
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.yacht-card-body { padding: 16px 16px 20px; }
.yacht-card-meta {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 8px;
  line-height: 1.4;
}
.yacht-card-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.yacht-card-price span {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-light);
}
.btn-book {
  display: inline-flex;       /* inline para que no se estire a todo el ancho */
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px;
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
}
.btn-book:hover { background: var(--navy-dark); color: var(--white); transform: translateY(-2px); }

/* FILTER TABS */
.filter-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 40px 40px 8px;
  flex-wrap: wrap;
}
.filter-tab {
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  border: 2px solid var(--navy);
  color: var(--navy);
  background: transparent;
}
.filter-tab.active,
.filter-tab:hover {
  background: var(--navy);
  color: var(--white);
}

/* FAQ */
.faq { padding: 48px 40px 64px; max-width: 960px; margin: 0 auto; }
.faq h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 32px;
  text-align: center;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  cursor: pointer;
}
.faq-item p {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.6;
}

/* OPINIONES
   La nota media y el reparto a la izquierda, las opiniones en tarjetas a la
   derecha. Los grises, el amarillo de las estrellas y el avatar con la
   inicial siguen el acabado de las fichas de Google: es un lenguaje que la
   gente ya sabe leer. Las estrellas se rellenan con un degradado recortado
   sobre el texto, asi que una media de 4,7 deja la ultima a medias sin
   necesidad de medias estrellas dibujadas. */
.reviews {
  background: var(--white);
  padding: 64px 40px;
}
.reviews-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--navy-dark);
  margin-bottom: 6px;
  text-align: center;
}
.reviews-sub {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 36px;
}
.reviews-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 44px;
  max-width: 1160px;
  margin: 0 auto;
  align-items: start;
}

/* ---- panel de la nota ---- */
.rv-score {
  text-align: center;
  padding: 30px 22px;
  border: 1px solid #dadce0;
  border-radius: 16px;
  background: var(--white);
}
.rv-big {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  color: #202124;
  letter-spacing: -0.02em;
}
.rv-stars {
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
  background: linear-gradient(90deg, #fbbc04 var(--f, 100%), #dadce0 var(--f, 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rv-score .rv-stars { font-size: 20px; display: inline-block; margin-top: 10px; }
.rv-total { font-size: 13px; color: #70757a; margin-top: 8px; }
.rv-sources { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.rv-brand {
  width: 30px; height: 30px; border-radius: 50%; background: var(--white);
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px #e4e8f0, 0 1px 2px rgba(16, 24, 40, .06);
}
.rv-brand svg { width: 16px; height: 16px; display: block; }
.rv-brand.is-tp { background: #00b67a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(16, 24, 40, .08); }
.rv-brand.is-tp svg { width: 17px; height: 17px; fill: var(--white); }
.rv-sources-text { font-size: 12px; color: #70757a; margin-top: 9px; }
.rv-bars { margin-top: 22px; padding-top: 20px; border-top: 1px solid #eef1f6; text-align: left; }
.rv-bar { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #70757a; margin-bottom: 7px; }
.rv-bar:last-child { margin-bottom: 0; }
.rv-bar i { flex: 1; height: 8px; border-radius: 99px; background: #dadce0; overflow: hidden; }
.rv-bar i b { display: block; height: 100%; background: #fbbc04; border-radius: 99px; }
.rv-bar-n { width: 8px; text-align: right; font-variant-numeric: tabular-nums; }
.rv-bar-c { width: 20px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- tarjetas ---- */
.rv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.rv-card {
  border: 1px solid #e8ecf3;
  border-radius: 14px;
  padding: 22px;
  background: var(--white);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rv-card:hover {
  border-color: #cdd6e5;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .07);
}
.rv-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.rv-ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  color: var(--white); font-weight: 600; font-size: 16px;
}
.rv-name { font-size: 15px; font-weight: 600; color: var(--navy-dark); line-height: 1.3; }
.rv-country { font-size: 12.5px; color: var(--text-muted); }
.rv-row { display: flex; align-items: center; gap: 8px; }
.rv-when { font-size: 12.5px; color: #70757a; }
.rv-text { font-size: 14.5px; line-height: 1.6; color: var(--text-light); margin: 12px 0 0; }

/* FOOTER */
.footer {
  background: var(--navy-dark);
  padding: 48px 40px 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-logo-badge { display: block; width: 72px; height: 72px; margin-bottom: 16px; }
.footer-logo {
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.footer-logo-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 0;
}
.footer-logo-sub span { color: var(--white); font-weight: 700; }
.footer p {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
}
.footer h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 24px;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-links a {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
}
.footer-links a:hover { color: var(--white); }
.footer-contact span {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 10px;
}

/* FINDER LIST */
.finder-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.finder-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.finder-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.finder-card:last-child { border-bottom: none; }
.finder-card-images {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: 340px;
}
.finder-card-main {
  grid-row: 1 / 3;
}
.finder-card-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.finder-card-thumbs {
  display: contents;
}
.finder-card-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.finder-card-info h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.finder-specs {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.finder-specs td {
  padding: 4px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  vertical-align: top;
}
.finder-specs td:first-child {
  color: var(--text);
  font-weight: 600;
  padding-right: 24px;
  width: 60%;
}
.finder-specs td:last-child {
  color: var(--text-light);
  text-align: right;
}
.water-toys-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.water-toys-list li {
  font-size: 14px;
  color: var(--text-light);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.water-toys-list li:last-child {
  border-bottom: none;
}
.finder-prices {
  margin-bottom: 20px;
}
.finder-prices span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.btn-finder {
  display: inline-block;
  padding: 12px 28px;
  background: var(--navy);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s;
}
.btn-finder:hover { background: var(--navy-dark); color: var(--white); }

/* YACHT DETAIL */
.yacht-detail {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 48px 80px;
}
.yacht-detail h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
}

/* yacht-below: description + sidebar */
.yacht-below .form-card {
  margin-bottom: 24px;
}

/* Suggested itineraries in sidebar */
.suggested-itineraries {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--light-bg);
  padding: 16px;
}
.itinerary-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  border-radius: 0;
  overflow: hidden;
  transition: background 0.2s;
  padding: 6px;
}
.itinerary-mini:hover {
  background: rgba(44,62,107,0.06);
}
.itinerary-mini img {
  width: 80px;
  height: 56px;
  object-fit: cover;
  border-radius: 0;
  flex-shrink: 0;
}
.itinerary-mini span {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}
.yacht-below {
  display: grid;
  grid-template-columns: 1.82fr 1fr;
  gap: 32px;
  margin-top: 8px;
  margin-bottom: 32px;
}
.sidebar-heading {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--navy);
  margin: 16px 0 12px;
}

/* Gallery grid: main + 3 side */
.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 6px;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 23 / 10;
}
.gallery-main {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  grid-row: 1 / -1;
}
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.85);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.gallery-arrow:hover { background: var(--white); }
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
.gallery-side-img {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  min-height: 0;
}
.gallery-side-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-all-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
}

/* Thumbnail strip */
.gallery-thumbs-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 32px;
}
.gallery-thumb {
  flex: 1;
  height: 76px;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-thumb-more {
  position: relative;
}
.gallery-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.active {
  display: flex;
}
.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 36px;
  cursor: pointer;
  z-index: 2;
}
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 30px;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.lightbox-arrow:hover { background: rgba(255,255,255,0.3); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 14px;
}
.yacht-detail-text {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 0;
}
.yacht-detail-text p {
  margin-bottom: 14px;
}

/* FORM */
.form-card {
  background: var(--navy);
  border-radius: 0;
  padding: 24px;
}
.form-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 14px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.form-card input,
.form-card textarea,
.form-card select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 8px;
  color: var(--white);
}
.form-card input::placeholder,
.form-card textarea::placeholder {
  color: rgba(255,255,255,0.5);
}
.form-card select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.form-card select option {
  background: var(--navy);
  color: var(--white);
}
.form-card textarea { height: 60px; resize: vertical; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.btn-send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 12px;
  background: var(--accent);
  color: var(--white);
  font-size: 14px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-send:hover { background: var(--accent-hover); transform: translateY(-2px); }

/* PRICE TABLE */
.price-table { margin-top: 40px; }
.price-table h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 20px;
}
.price-table table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
}
.price-table thead { background: var(--navy); }
.price-table th {
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  text-align: left;
}
.price-table td {
  padding: 14px 20px;
  font-size: 13px;
  color: #555;
  border-bottom: 1px solid #eee;
}
.price-table tr:nth-child(even) { background: #fafafa; }
.price-table .price {
  font-weight: 600;
  color: var(--navy);
}
.price-note {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 12px;
  font-style: italic;
}
.price-includes {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
}
.price-includes p {
  margin: 4px 0;
}
.price-includes strong {
  color: var(--navy);
}

/* Sticky bottom bar */
.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  z-index: 999;
  padding: 12px 0;
}
.sticky-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sticky-bar-price {
  display: flex;
  flex-direction: column;
}
.sticky-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
}
.sticky-per {
  font-size: 13px;
  color: var(--text-light);
}
.sticky-cancel {
  font-size: 11px;
  color: #27ae60;
  margin-top: 2px;
}
.sticky-bar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sticky-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.12);
  color: var(--navy);
  text-decoration: none;
  transition: background 0.2s;
}
.sticky-icon:hover {
  background: rgba(44,62,107,0.06);
}
.sticky-book {
  padding: 12px 28px;
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s;
}
.sticky-book:hover {
  background: #1e2d4d;
}

.featured-yachts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}

/* AMENITIES GRID */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.amenity-card {
  background: var(--light-bg);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* SECTION TITLE */
.section-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin: 40px 0 20px;
}

/* ITINERARY CARDS */
.itinerary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 32px 40px 64px;
}
.itinerary-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.2s;
  cursor: pointer;
}
.itinerary-card:hover { transform: translateY(-4px); }
.itinerary-card-img {
  height: 200px;
  background: linear-gradient(135deg, var(--navy), #4a9bb5);
  position: relative;
  overflow: hidden;
}
.itinerary-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.itinerary-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.itinerary-card-body { padding: 20px; }
.itinerary-card-body h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.3;
}
.itinerary-card-body p {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.5;
  margin-bottom: 12px;
}
.read-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* WHATSAPP FLOAT */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: var(--whatsapp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4);
  z-index: 50;
  transition: transform 0.2s;
}
.whatsapp-float:hover { transform: scale(1.1); }
.whatsapp-float svg { width: 28px; height: 28px; fill: white; }

/* CONTENT PAGE */
.content-page {
  padding: 48px 40px;
  max-width: 900px;
  margin: 0 auto;
}
.content-page h1 {
  font-size: 36px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 24px;
}
.content-page p {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 16px;
}

/* WHERE TO FIND US */
.where-find-us {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.where-find-us h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 12px;
}
.where-find-us p {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 24px;
}
.contact-map {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 450px;
}

/* RESPONSIVE */
@media (max-width: 1500px) {
  .yacht-detail { max-width: 1200px; }
  .gallery-thumb { height: 64px; }
}
@media (max-width: 1280px) {
  .yacht-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .yacht-grid,
  .itinerary-grid,
  .featured-yachts { grid-template-columns: repeat(2, 1fr); }

  .yacht-below { grid-template-columns: 1fr; }
  .form-card { position: static; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .amenities-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { }
}

@media (max-width: 768px) {
  .header { padding: 0 16px; }
  /* Solo el de la cabecera: .btn-contact tambien se usa en otras
     paginas, y antes esta regla los escondia todos. */
  .header-nav,
  .header .btn-contact { display: none; }
  .hamburger { display: block; }
  .hero { padding: 48px 20px 56px; }
  .hero h1 { font-size: 36px; }
  .hero p { font-size: 14px; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-sm { padding: 40px 20px 48px; }
  .hero-sm h1 { font-size: 32px; }
  .yacht-grid,
  .itinerary-grid { grid-template-columns: 1fr; padding: 24px 16px; }
  .filter-tabs { padding: 24px 16px 8px; }
  .faq { padding: 32px 16px; }
  .reviews { padding: 40px 16px; }
  .reviews-wrap { grid-template-columns: 1fr; gap: 28px; }
  .rv-grid { grid-template-columns: 1fr; }
  .footer { padding: 32px 16px 24px; }
  .yacht-detail { padding: 24px 16px; }
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; aspect-ratio: auto; }
  .gallery-main { grid-row: auto; aspect-ratio: 16/10; }
  .gallery-side-img { height: 100px; }
  .gallery-thumb { flex: 0 0 64px; height: 44px; }
  .content-page { padding: 32px 16px; }
  .content-page > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .amenities-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .finder-list { padding: 24px 16px 32px; }
  .finder-card { grid-template-columns: 1fr; gap: 20px; }
  .finder-card-images { grid-template-columns: 1.4fr 1fr; }
  .sticky-bar-inner { padding: 0 16px; }
  .sticky-price { font-size: 18px; }
  .sticky-cancel { display: none; }
  .sticky-book { padding: 10px 18px; font-size: 12px; }
  .sticky-icon { width: 38px; height: 38px; }
  .sticky-bar-actions { gap: 10px; }
}

/* SPEC STRIP: franja de caracteristicas sobre Boat Description */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--light-bg);
  padding: 22px 16px;
  margin-bottom: 8px;
}
.spec-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.spec-strip-item + .spec-strip-item {
  border-left: 1px solid rgba(0,0,0,0.12);
}
.spec-strip-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  line-height: 1;
}
.spec-strip-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-dark);
  line-height: 1.1;
}

@media (max-width: 768px) {
  .spec-strip { grid-template-columns: repeat(2, 1fr); gap: 20px 0; padding: 20px 8px; }
  .spec-strip-item:nth-child(odd) { border-left: none; }
  .spec-strip-value { font-size: 16px; }
  .spec-strip-label { font-size: 11px; letter-spacing: 1px; }
}


/* Desbordamiento horizontal de la ficha en movil: la tira de miniaturas y la
   tabla de tarifas se salian de la pantalla y arrastraban al modal con ellas. */
@media (max-width: 768px) {
  .gallery-thumbs-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gallery-thumbs-row::-webkit-scrollbar { display: none; }
  .price-table { overflow-x: auto; }
  .price-table table { min-width: 420px; }
}

/* Insignia de reserva instantanea en home y finder */
.instant-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: var(--white);
  color: var(--navy-dark);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  line-height: 1;
  white-space: nowrap;
}
.instant-badge svg { color: var(--accent); flex-shrink: 0; }
/* Sobre la foto el borde sobra: la separa la sombra */
.instant-badge.is-floating {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.finder-card-info .instant-badge { margin-bottom: 14px; }

@media (max-width: 768px) {
  .instant-badge { font-size: 10px; padding: 5px 8px; letter-spacing: 0.5px; }
  .instant-badge.is-floating { top: 8px; right: 8px; }
}

/* ============ MAPA DE RUTA (ficha de itinerario) ============ */
.route-map {
  margin: 48px 0 8px;
  padding: 32px;
  background: var(--light-bg);
}
.route-map-head { margin-bottom: 22px; }
.route-map-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--accent-hover);
  margin-bottom: 8px;
}
.route-map-head h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.02em;
}

.route-map-canvas {
  overflow: hidden;
  border: 1px solid var(--border);
  background: #eef3f9;
  /* Leaflet usa z-index hasta 1000 en sus paneles y controles, asi que al hacer
     scroll el mapa tapaba el header fijo (z-index 100) y el boton de WhatsApp.
     Con position+z-index:0 esos valores quedan encerrados dentro del lienzo. */
  position: relative;
  z-index: 0;
}
/* Nada de reglas genericas sobre svg aqui dentro: Leaflet dibuja la derrota
   en un <svg> y pone otro en la atribucion. Estirarlos al 100% borraba la
   linea y convertia su logo en un bloque gigante. */

.route-map-legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 20px;
  margin-top: 22px;
  padding: 0;
}
.route-map-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}
.rm-dot {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  /* mismo aspecto que la chincheta del mapa: navy con aro naranja */
  background: var(--navy);
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
}
.route-map-legend .is-port .rm-dot { background: var(--navy-dark); box-shadow: none; }
.route-map-legend .is-pass .rm-dot {
  background: var(--white);
  border: 2px solid var(--accent);
  box-shadow: none;
}
.rm-name { font-weight: 500; }
.rm-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .route-map { padding: 22px 16px; margin-top: 36px; }
  .route-map-head h2 { font-size: 20px; }
  .route-map-legend { grid-template-columns: 1fr; }
}

/* rejilla de 3 fotos de las calas: cierra el texto, justo antes de The Route */
.route-shots {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 34px 0 0;
  padding: 0;
}
.route-shots li {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #eef3f9;
}
/* sin height:100% aqui: el <li> no tiene alto propio y la foto se quedaba en 0 */
.route-shots img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* el nombre va sobre la foto, con un velo navy para que se lea siempre */
.route-shots .rs-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
  background: linear-gradient(to top, rgba(12, 22, 44, .82), rgba(12, 22, 44, 0));
}
.route-shots-credit {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}
.route-shots-credit a { color: inherit; text-decoration: underline; }

@media (max-width: 640px) {
  .route-shots { grid-template-columns: 1fr; gap: 10px; }
}

/* el lienzo del mapa pasa a ser el mapa real */
.route-map-leaflet { height: 460px; width: 100%; background: #dde4ee; }
.route-map-canvas .leaflet-container { font-family: 'Montserrat', sans-serif; }
.route-map-canvas .leaflet-control-attribution { font-size: 10px; }

.rm-pin-wrap { background: none; border: none; }
.rm-pin-wrap svg { filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.rm-pin-label {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 3px);
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  text-shadow:
    0 0 3px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.8),
    0 1px 2px rgba(0,0,0,.95), 1px 0 2px rgba(0,0,0,.7), -1px 0 2px rgba(0,0,0,.7);
  pointer-events: none;
}

@media (max-width: 768px) {
  .route-map-leaflet { height: 340px; }
  .rm-pin-label { font-size: 11px; }
}

/* La barra fija ya no es un enlace: en los barcos de solicitud abre
   el modal, asi que tiene que heredar lo que un <button> no hereda. */
button.sticky-book {
  border: none;
  font-family: inherit;
  cursor: pointer;
}

/* Logo DYCM en cabecera: responsive.
   El menu esta centrado en la pagina, no entre sus vecinos, asi que al
   estrechar la ventana quien tiene que ceder es el logo: si no, la insignia
   acaba tocando el primer enlace. */
.header-nav a { white-space: nowrap; }
@media (max-width: 1280px) {
  .header-logo-text { font-size: 12px; letter-spacing: 1px; }
  .header-nav { gap: 20px; }
}
@media (max-width: 1200px) {
  .header { padding: 0 24px; }
  .header-logo-badge { width: 32px; height: 32px; }
  .header-logo-text { font-size: 11px; letter-spacing: 0.8px; }
}
@media (max-width: 1120px) and (min-width: 769px) {
  /* La hamburguesa entra en 1120 y no en 1024: entre esas dos medidas el
     logo y el primer enlace se quedaban a 7px, y un menu apretado se lee
     peor que un menu guardado. Aqui sobra sitio y el logo recupera tamano. */
  .header { padding: 0 24px; }
  .header-logo-badge { width: 38px; height: 38px; }
  .header-logo-text { font-size: 13px; letter-spacing: 1.4px; }
  /* Solo el de la cabecera: .btn-contact tambien se usa en otras
     paginas, y antes esta regla los escondia todos. */
  .header-nav,
  .header .btn-contact { display: none; }
  .hamburger { display: block; }
}
@media (max-width: 480px) {
  .header-logo-badge { width: 30px; height: 30px; }
  .header-logo-text { font-size: 11px; letter-spacing: 0.6px; }
}


/* ============================================================
   FOTOS: QUITAR EL ATAJO DE "GUARDAR IMAGEN COMO"
   ------------------------------------------------------------
   Las fotos siguen siendo <img> de verdad con su alt, porque es lo
   que las mantiene en Google Imagenes. Lo que se les quita es ser
   blanco del puntero: el clic derecho ya no cae sobre la imagen
   sino sobre lo que hay detras, asi que el navegador ofrece el menu
   de la pagina (Guardar como..., Imprimir) y no el de la imagen.
   Arrastrarla al escritorio y la pulsacion larga del movil tampoco
   funcionan.

   Esto NO impide copiar una foto: una captura de pantalla, las
   herramientas de desarrollo o pedir la URL directa siguen valiendo.
   Lo unico que impide de verdad el uso ajeno es la marca de agua.

   Los clics siguen funcionando porque en esta web el manejador
   siempre esta en el contenedor (.gallery-main, .yacht-card...),
   nunca en la propia imagen.
   ============================================================ */
img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* El panel de fotos se ordena arrastrando: ahi hace falta el puntero. */
.admin-photo img,
.admin-photos img { pointer-events: auto; -webkit-user-drag: auto; }

/* La foto del lightbox va dentro de su propio marco, que es quien
   recibe el clic derecho y quien evita que se cierre al pulsarla. */
.lightbox-stage {
  position: relative;
  display: flex;
  max-width: 90vw;
  max-height: 85vh;
}
.lightbox-stage img { display: block; }

/* ============================================================
   SERVICIOS (juguetes acuaticos) Y PAGINAS LEGALES
   Replican las paginas que ya existian en WordPress.
   ============================================================ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 28px 0 36px;
}
.service-card {
  display: block;
  padding: 24px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.service-card:hover { border-color: var(--accent); background: #fff; }
.service-card h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 8px;
  letter-spacing: -0.021em;
}
.service-card p { font-size: 14px; color: var(--text-light); margin: 0 0 14px; line-height: 1.55; }
.service-price { font-size: 18px; font-weight: 700; color: var(--navy); }
.service-price small { font-size: 12px; font-weight: 500; color: var(--text-muted); }

/* La foto de la pagina de servicio. Las tres son 800x600, asi que el 4/3 no
   recorta nada; esta puesto para que el hueco se reserve antes de cargar y la
   pagina no de un salto. */
.service-shot { margin: 0 0 26px; }
.service-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--border);
}

.service-price-box {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px 22px;
  background: var(--light-bg);
  border-left: 3px solid var(--accent);
  margin-bottom: 26px;
}
.sp-amount { font-size: 30px; font-weight: 700; color: var(--navy-dark); line-height: 1; }
.sp-unit { font-size: 14px; color: var(--text-light); }

.service-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 10px; }
.service-note { font-size: 14px; color: var(--text-light); }

.legal-list { margin: 0 0 18px 20px; }
.legal-list li { font-size: 15px; line-height: 1.7; color: var(--text); margin-bottom: 10px; }

@media (max-width: 768px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* Respuesta del formulario de contacto */
.form-aviso {
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  background: rgba(44,62,107,.07);
  border-left: 3px solid var(--navy);
  color: var(--navy-dark);
}
.form-aviso.es-error {
  background: rgba(244,118,31,.1);
  border-left-color: var(--accent);
  color: var(--accent-hover);
}