/* ==========================================================================
   YATE.CO — Sistema de diseño (design system) v1
   --------------------------------------------------------------------------
   Capa de diseño moderna para el rediseño del portal. TODO va con prefijo
   `ds-` para NO colisionar con el CSS actual (Skeleton/main.css); así se
   migra vista por vista sin romper nada. No toca lógica, i18n ni SEO.
   Marca: verde Yate + azul océano (náutico premium).
   ========================================================================== */

:root {
  /* ---- Marca (colores oficiales del logo yate.co) ---- */
  --ds-primary:        #0d2c54;   /* NAVY del logo (marca principal: texto "Yate.co" + casco) */
  --ds-primary-600:    #0a2444;
  --ds-primary-700:    #071b34;
  --ds-primary-050:    #e9eef5;   /* tinte navy claro para fondos */

  --ds-ocean:          #1b75bb;   /* AZUL vivo del logo (rayas del barco) — interactivo/acento */
  --ds-ocean-600:      #155e96;
  --ds-ocean-050:      #e8f2fb;

  --ds-gold:           #f9cf16;   /* AMARILLO del logo (el punto) — CTA/acento energético */
  --ds-gold-600:       #e0b70a;
  --ds-warm:           #ec6726;   /* NARANJA del logo (tagline) — ofertas/etiquetas/eyebrow */
  --ds-warm-600:       #cf551a;
  --ds-warm-050:       #fdeee6;

  /* ---- Neutros / tinta ---- */
  --ds-navy:           #0d2c54;   /* secciones oscuras / footer = navy de marca */
  --ds-ink:            #0d2c54;   /* titulares = navy de marca */
  --ds-body:          #3d4d5c;    /* texto de párrafo */
  --ds-muted:          #6b7c8a;   /* texto secundario */
  --ds-line:           #e6ebf0;   /* bordes / separadores */
  --ds-bg:             #f6f8fa;   /* fondo de página */
  --ds-surface:        #ffffff;   /* tarjetas / superficies */

  /* ---- Semánticos ---- */
  --ds-star:           #f9cf16;   /* estrellas rating = amarillo del logo */
  --ds-success:        #2e9e4f;
  --ds-danger:         #e03131;
  --ds-warning:        #f59f00;

  /* ---- Tipografía ---- */
  /* Si se carga "Inter"/"Poppins" via <link>, se usa; si no, cae a system-ui. */
  --ds-font:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ds-font-display: "Poppins", var(--ds-font);

  --ds-fs-xs:   .78rem;
  --ds-fs-sm:   .875rem;
  --ds-fs-base: 1rem;
  --ds-fs-md:   1.125rem;
  --ds-fs-lg:   1.375rem;
  --ds-fs-xl:   1.75rem;
  --ds-fs-2xl:  2.25rem;
  --ds-fs-3xl:  3rem;
  --ds-lh:      1.6;
  --ds-lh-tight: 1.2;

  /* ---- Espaciado (escala 4px) ---- */
  --ds-1: .25rem;  --ds-2: .5rem;  --ds-3: .75rem;  --ds-4: 1rem;
  --ds-5: 1.5rem;  --ds-6: 2rem;   --ds-8: 3rem;    --ds-10: 4rem;  --ds-12: 6rem;

  /* ---- Radios / sombras / transición ---- */
  --ds-radius-sm: 8px;
  --ds-radius:    14px;
  --ds-radius-lg: 22px;
  --ds-radius-pill: 999px;

  --ds-shadow-sm: 0 1px 2px rgba(15,34,51,.06), 0 1px 3px rgba(15,34,51,.08);
  --ds-shadow:    0 6px 18px rgba(15,34,51,.08);
  --ds-shadow-lg: 0 18px 40px rgba(15,34,51,.14);

  --ds-ease: .22s cubic-bezier(.4,0,.2,1);

  --ds-container: 1200px;
}

/* ==========================================================================
   Base (namespaced: solo aplica dentro de .ds — no afecta lo existente)
   Envuelve tus vistas nuevas en <div class="ds"> ... </div>
   ========================================================================== */
.ds {
  font-family: var(--ds-font);
  color: var(--ds-body);
  font-size: var(--ds-fs-base);
  line-height: var(--ds-lh);
  -webkit-font-smoothing: antialiased;
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.ds h1, .ds h2, .ds h3, .ds h4 {
  font-family: var(--ds-font-display);
  color: var(--ds-ink);
  line-height: var(--ds-lh-tight);
  margin: 0 0 var(--ds-3);
  font-weight: 700;
}
.ds h1 { font-size: clamp(2rem, 4vw, var(--ds-fs-3xl)); letter-spacing: -.02em; }
.ds h2 { font-size: clamp(1.5rem, 3vw, var(--ds-fs-2xl)); letter-spacing: -.01em; }
.ds h3 { font-size: var(--ds-fs-lg); }
.ds p  { margin: 0 0 var(--ds-4); }
.ds a  { color: var(--ds-ocean); text-decoration: none; transition: color var(--ds-ease); }
.ds a:hover { color: var(--ds-ocean-600); }
.ds img { max-width: 100%; height: auto; display: block; }

/* ---- Layout helpers ---- */
.ds-container { width: 100%; max-width: var(--ds-container); margin-inline: auto; padding-inline: var(--ds-5); }
.ds-section { padding-block: clamp(var(--ds-8), 7vw, var(--ds-12)); }
.ds-section--tint { background: var(--ds-bg); }
.ds-section--navy { background: var(--ds-navy); color: #cfdae4; }
.ds-section--navy h1, .ds-section--navy h2, .ds-section--navy h3 { color: #fff; }

.ds-section-head { text-align: center; max-width: 720px; margin: 0 auto var(--ds-6); }
.ds-eyebrow { display: inline-block; font-size: var(--ds-fs-sm); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ds-warm); margin-bottom: var(--ds-2); }
.ds-lead { font-size: var(--ds-fs-md); color: var(--ds-muted); }
.ds-cta-cities { display: flex; flex-wrap: wrap; gap: var(--ds-3); justify-content: center; margin-top: var(--ds-6); }

/* Bloque partido (texto + imagen, ej. "sobre nosotros") */
.ds-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-8); align-items: center; }
.ds-split__body h2 { margin-top: 0; }
.ds-split__media img { width: 100%; height: auto; border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-lg); display: block; }
.ds-richtext p { margin: 0 0 var(--ds-3); color: var(--ds-body); line-height: 1.7; }
.ds-richtext b, .ds-richtext strong { color: var(--ds-ink); font-weight: 700; }
@media (max-width: 860px) { .ds-split { grid-template-columns: 1fr; gap: var(--ds-5); } }

/* Tarjeta con imagen (servicios / blog) */
.ds-media-card { display: flex; flex-direction: column; height: 100%; }
.ds-media-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ds-bg); display: block; }
.ds-media-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ds-ease); }
.ds-media-card:hover .ds-media-card__img img { transform: scale(1.05); }
.ds-media-card__body { padding: var(--ds-4); display: flex; flex-direction: column; gap: var(--ds-2); flex: 1; }
.ds-media-card__date { font-size: var(--ds-fs-xs); color: var(--ds-muted); text-transform: uppercase; letter-spacing: .04em; }
.ds-media-card__title { font-family: var(--ds-font-display); font-weight: 700; color: var(--ds-ink);
  font-size: var(--ds-fs-lg); margin: 0; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ds-media-card__title a { color: inherit; }
.ds-media-card__text { color: var(--ds-body); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ds-media-card__more { margin-top: auto; padding-top: var(--ds-3); }

/* Banda CTA (contacto / cierre) */
.ds-cta { background: linear-gradient(120deg, var(--ds-primary) 0%, #123f74 55%, var(--ds-ocean) 135%); color: #fff; }
.ds-cta .ds-container { padding-block: var(--ds-10); }
.ds-cta__inner { display: flex; flex-wrap: wrap; gap: var(--ds-6); align-items: center; justify-content: space-between; }
.ds-cta__text { flex: 1 1 420px; }
.ds-cta__text h2 { color: #fff; margin: .2em 0 .4em; }
.ds-cta__text p { color: #dce6f0; margin: 0 0 var(--ds-4); max-width: 54ch; }
.ds-cta__contacts { display: flex; flex-wrap: wrap; gap: var(--ds-3) var(--ds-5); }
.ds-cta__contacts a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: .5em; }
.ds-cta__contacts i { color: var(--ds-gold); }
.ds-cta__actions { display: flex; flex-direction: column; gap: var(--ds-4); align-items: flex-start; }
.ds-cta__video { display: inline-flex; align-items: center; gap: .6em; color: #fff; font-weight: 600; cursor: pointer; }
.ds-cta__video i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.15); transition: all var(--ds-ease); }
.ds-cta__video:hover i { background: var(--ds-gold); color: var(--ds-primary); }
@media (max-width: 720px) { .ds-cta__actions { align-items: stretch; width: 100%; } }

/* Reseñas (prueba social) */
.ds-review { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius);
  padding: var(--ds-5); box-shadow: var(--ds-shadow-sm); display: flex; flex-direction: column; gap: var(--ds-3); height: 100%; }
.ds-review__head { display: flex; align-items: center; justify-content: space-between; }
.ds-review__stars { color: var(--ds-star); font-size: .95rem; letter-spacing: 2px; }
.ds-review__g { color: #4285F4; font-size: 1.15rem; }
.ds-review__text { color: var(--ds-body); font-size: var(--ds-fs-md); line-height: 1.6; margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.ds-review__foot { display: flex; align-items: center; gap: var(--ds-3); margin-top: var(--ds-2); }
.ds-review__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: var(--ds-bg); }
.ds-review__name { font-weight: 700; color: var(--ds-ink); font-size: var(--ds-fs-sm); line-height: 1.2; }
.ds-review__date { color: var(--ds-muted); font-size: var(--ds-fs-xs); }

/* Feature (ventaja con icono) */
.ds-feature { text-align: center; padding: var(--ds-5) var(--ds-4); }
.ds-feature__icon { width: 72px; height: 72px; margin: 0 auto var(--ds-4); border-radius: 50%;
  display: grid; place-items: center; font-size: 1.8rem; color: var(--ds-ocean);
  background: var(--ds-ocean-050); border: 1px solid var(--ds-ocean-100, var(--ds-line)); }
.ds-feature__title { font-family: var(--ds-font-display); font-weight: 700; color: var(--ds-ink);
  font-size: var(--ds-fs-lg); margin: 0 0 var(--ds-2); }
.ds-feature__text { color: var(--ds-body); font-size: var(--ds-fs-md); margin: 0; max-width: 40ch; margin-inline: auto; }

.ds-grid { display: grid; gap: var(--ds-5); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ==========================================================================
   Botones
   ========================================================================== */
.ds-btn {
  --_bg: var(--ds-primary); --_fg: #fff; --_bd: var(--ds-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-2);
  font-family: var(--ds-font); font-weight: 600; font-size: var(--ds-fs-base);
  line-height: 1; text-align: center; cursor: pointer; user-select: none;
  padding: .85rem 1.5rem; border-radius: var(--ds-radius-pill);
  background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
  transition: transform var(--ds-ease), box-shadow var(--ds-ease), background var(--ds-ease), color var(--ds-ease);
}
.ds-btn:hover { background: var(--ds-primary-600); border-color: var(--ds-primary-600); color: #fff; transform: translateY(-1px); box-shadow: var(--ds-shadow); }
.ds-btn:active { transform: translateY(0); }
.ds-btn:focus-visible { outline: 3px solid var(--ds-primary-050); outline-offset: 2px; }

.ds-btn--ocean { --_bg: var(--ds-ocean); --_bd: var(--ds-ocean); }
.ds-btn--ocean:hover { background: var(--ds-ocean-600); border-color: var(--ds-ocean-600); }
.ds-btn--gold { --_bg: var(--ds-gold); --_fg: var(--ds-primary); --_bd: var(--ds-gold); }
.ds-btn--gold:hover { background: var(--ds-gold-600); border-color: var(--ds-gold-600); color: var(--ds-primary); }
.ds-btn--gold:focus-visible { outline-color: #fdefb0; }
.ds-btn--warm { --_bg: var(--ds-warm); --_bd: var(--ds-warm); }
.ds-btn--warm:hover { background: var(--ds-warm-600); border-color: var(--ds-warm-600); }
.ds-btn--outline { --_bg: transparent; --_fg: var(--ds-ink); --_bd: var(--ds-line); }
.ds-btn--outline:hover { background: var(--ds-primary-050); color: var(--ds-primary-700); border-color: var(--ds-primary); }
.ds-btn--ghost { --_bg: transparent; --_fg: var(--ds-ink); --_bd: transparent; }
.ds-btn--ghost:hover { background: var(--ds-bg); color: var(--ds-ink); box-shadow: none; }
.ds-btn--lg { padding: 1.05rem 2rem; font-size: var(--ds-fs-md); }
.ds-btn--sm { padding: .55rem 1rem; font-size: var(--ds-fs-sm); }
.ds-btn--block { width: 100%; }
.ds-btn--wa { --_bg: #25d366; --_bd: #25d366; }
.ds-btn--wa:hover { background: #1eb257; border-color: #1eb257; }

/* ==========================================================================
   Formularios / inputs
   ========================================================================== */
.ds-field { display: flex; flex-direction: column; gap: var(--ds-1); text-align: left; }
.ds-label { font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-ink); }
.ds-input, .ds-select {
  font-family: var(--ds-font); font-size: var(--ds-fs-base); color: var(--ds-ink);
  background: var(--ds-surface); border: 1.5px solid var(--ds-line); border-radius: var(--ds-radius-sm);
  padding: .8rem 1rem; width: 100%; transition: border-color var(--ds-ease), box-shadow var(--ds-ease); appearance: none;
}
.ds-input::placeholder { color: #9aa8b4; }
.ds-input:focus, .ds-select:focus { outline: none; border-color: var(--ds-primary); box-shadow: 0 0 0 4px var(--ds-primary-050); }
.ds-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7c8a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

/* ==========================================================================
   Buscador (search widget) — al estilo Nautal/GetMyBoat
   ========================================================================== */
.ds-search {
  background: var(--ds-surface); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-2); display: grid; gap: var(--ds-2);
  grid-template-columns: 1.4fr 1fr 1fr auto; align-items: end;
}
.ds-search .ds-field { padding: .35rem .75rem; border-radius: var(--ds-radius); }
.ds-search .ds-field + .ds-field { border-left: 1px solid var(--ds-line); }
.ds-search .ds-input, .ds-search .ds-select { border: none; padding-inline: 0; }
.ds-search .ds-input:focus, .ds-search .ds-select:focus { box-shadow: none; }
.ds-search .ds-btn { height: 100%; }
@media (min-width: 861px) { .ds-search--home { grid-template-columns: 1fr 1.5fr auto; } }
@media (max-width: 860px) {
  .ds-search { grid-template-columns: 1fr; }
  .ds-search .ds-field + .ds-field { border-left: none; border-top: 1px solid var(--ds-line); }
}
.ds-hero-headline { font-family: var(--ds-font-display); font-weight: 800; color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(0,0,0,.28); max-width: 18ch; margin: 0 0 var(--ds-3); }

/* ==========================================================================
   Hero
   ========================================================================== */
.ds-hero { position: relative; color: #fff; display: grid; align-items: center;
  min-height: clamp(460px, 68vh, 720px); overflow: hidden; }
.ds-hero__media { position: absolute; inset: 0; z-index: 0; }
.ds-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ds-hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,44,84,.35) 0%, rgba(13,44,84,.58) 55%, rgba(13,44,84,.78) 100%); }
.ds-hero__inner { position: relative; z-index: 2; width: 100%; }
.ds-hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.25); max-width: 16ch; }
.ds-hero__sub { font-size: var(--ds-fs-md); color: #e8eef3; max-width: 48ch; margin-bottom: var(--ds-5); }
.ds-hero__kicker { color: var(--ds-gold); font-family: var(--ds-font-display); font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.4rem); margin: 0 0 var(--ds-2); text-shadow: 0 1px 10px rgba(0,0,0,.25); }
.ds-hero__proof { display: flex; flex-wrap: wrap; gap: var(--ds-4) var(--ds-5); margin-top: var(--ds-4);
  color: #eaf1f7; font-size: var(--ds-fs-sm); font-weight: 500; }
.ds-hero__proof i { color: var(--ds-gold); margin-right: .4em; }

/* ==========================================================================
   Tarjetas (genérica + tarjeta de embarcación)
   ========================================================================== */
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm); overflow: hidden; transition: transform var(--ds-ease), box-shadow var(--ds-ease); }
.ds-card:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-lg); }

.ds-boat-card { display: flex; flex-direction: column; height: 100%; }
.ds-boat-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ds-bg); }
.ds-boat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ds-ease); }
.ds-boat-card:hover .ds-boat-card__media img { transform: scale(1.06); }
.ds-boat-card__badge { position: absolute; top: var(--ds-3); left: var(--ds-3); z-index: 2; }
.ds-boat-card__fav { position: absolute; top: var(--ds-3); right: var(--ds-3); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.9); color: var(--ds-ink); border: none; cursor: pointer; box-shadow: var(--ds-shadow-sm); }
.ds-boat-card__fav:hover { color: var(--ds-danger); }
.ds-boat-card__body { padding: var(--ds-4); display: flex; flex-direction: column; gap: var(--ds-2); flex: 1; }
.ds-boat-card__loc { font-size: var(--ds-fs-sm); color: var(--ds-muted); display: flex; align-items: center; gap: 6px; }
.ds-boat-card__title { font-family: var(--ds-font-display); font-weight: 700; color: var(--ds-ink);
  font-size: var(--ds-fs-md); margin: 0; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ds-boat-card__specs { display: flex; flex-wrap: wrap; gap: var(--ds-3); font-size: var(--ds-fs-sm);
  color: var(--ds-body); margin-top: auto; }
.ds-boat-card__specs span { display: inline-flex; align-items: center; gap: 5px; }
.ds-boat-card__foot { display: flex; align-items: flex-end; justify-content: space-between;
  border-top: 1px solid var(--ds-line); padding-top: var(--ds-3); margin-top: var(--ds-2); }
.ds-price { line-height: 1.1; }
.ds-price__amount { font-family: var(--ds-font-display); font-weight: 800; color: var(--ds-ink); font-size: var(--ds-fs-lg); }
.ds-price__unit { font-size: var(--ds-fs-xs); color: var(--ds-muted); }

/* ==========================================================================
   Rating, badges, chips, señales de confianza
   ========================================================================== */
.ds-rating { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-ink); }
.ds-rating__star { color: var(--ds-star); }
.ds-rating__count { color: var(--ds-muted); font-weight: 400; }

.ds-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-fs-xs); font-weight: 700;
  padding: .35rem .7rem; border-radius: var(--ds-radius-pill); background: var(--ds-primary); color: #fff; letter-spacing: .01em; }
.ds-badge--ocean { background: var(--ds-ocean); }
.ds-badge--gold  { background: var(--ds-gold); color: var(--ds-primary); }
.ds-badge--warm  { background: var(--ds-warm); }
.ds-badge--soft  { background: var(--ds-ocean-050); color: var(--ds-ocean-600); }
.ds-badge--glass { background: rgba(255,255,255,.92); color: var(--ds-ink); }

.ds-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-fs-sm); font-weight: 600;
  padding: .5rem 1rem; border-radius: var(--ds-radius-pill); background: var(--ds-surface);
  border: 1.5px solid var(--ds-line); color: var(--ds-ink); cursor: pointer; transition: all var(--ds-ease); }
.ds-chip:hover, .ds-chip.is-active { border-color: var(--ds-primary); background: var(--ds-primary-050); color: var(--ds-primary-700); }

.ds-trust { display: flex; flex-wrap: wrap; gap: var(--ds-5) var(--ds-6); align-items: center; justify-content: center; }
.ds-trust__item { display: flex; align-items: center; gap: var(--ds-2); font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-body); }
.ds-trust__item svg, .ds-trust__item i { color: var(--ds-primary); font-size: 1.4em; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) { .ds-grid--4 { grid-template-columns: repeat(2, 1fr); } .ds-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ds-grid--4, .ds-grid--3 { grid-template-columns: 1fr; } .ds-container { padding-inline: var(--ds-4); } }