/* ==========================================================================
   OCEANS BEST — Sitio informativo (distribuidor de mariscos para
   restaurantes, hoteles y catering)

   CÓMO EDITAR ESTE ARCHIVO
   Los colores, tipografía y radios de esquina están centralizados en el
   bloque :root de abajo. Para ajustar el estilo general, cambia solo esas
   variables — el resto del CSS las usa automáticamente en todo el sitio.
   El contenido (fotos, textos, productos) se edita en index.html; ahí cada
   sección tiene comentarios marcados como "EDITAR AQUÍ".
   ========================================================================== */

:root {
  /* ---- COLOR: tomada directo del logo de Ocean's Best Group -------------
     Muestreada de la foto del camión que envió el cliente. El logo real
     usa solo dos azules (marino + celeste) — por eso la paleta del sitio
     también es solo esas dos familias, sin un tercer color inventado.
     Cuando llegue el archivo del logo definitivo, se puede afinar el tono
     exacto aquí sin tocar nada más. */
  --navy-950: #17263e;    /* azul marino del logo — texto principal, nav, footer */
  --navy-800: #223a5c;    /* marino, un tono más claro (hover de botones oscuros) */
  --navy-700: #46617f;    /* texto secundario */
  --navy-400: #8a9db3;    /* texto terciario / placeholders */
  --foam-50: #f5f8fb;      /* fondo principal, blanco con un toque azul */
  --foam-100: #e8eef4;     /* fondo alterno de secciones */
  --foam-200: #d7e1ea;     /* líneas, bordes sutiles */
  --accent-500: #4a86bc;   /* celeste del logo — acento principal: CTA, íconos, enlaces */
  --accent-600: #35688f;   /* celeste, más oscuro (hover) */
  --accent-50: #eaf2f9;    /* celeste muy claro, para fondos suaves */

  /* ---- TIPOGRAFÍA -------------------------------------------------------- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* ---- LAYOUT ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --shadow-card: 0 1px 2px rgba(11, 36, 54, 0.05), 0 14px 28px -14px rgba(11, 36, 54, 0.16);
  --shadow-pop: 0 2px 4px rgba(11, 36, 54, 0.06), 0 26px 50px -18px rgba(11, 36, 54, 0.26);

  /* Nota: sitio de una sola identidad de marca (no cambia con modo oscuro
     del sistema) — decisión deliberada, como la mayoría de sitios
     institucionales/B2B. */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--foam-50);
  color: var(--navy-950);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
  color: var(--navy-950);
}
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--accent-600); }

p { margin: 0 0 1em; color: var(--navy-700); }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: 1em;
}
.eyebrow::before { content: ""; width: 1.4em; height: 1px; background: var(--accent-600); }

section { padding-block: clamp(3.5rem, 8vw, 6rem); }
section.alt { background: var(--foam-100); }

.section-head { max-width: 620px; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }

/* Divisor de ola entre secciones (motivo del océano) */
.wave-divider { display: block; width: 100%; height: 32px; }
.wave-divider path { fill: none; stroke: var(--foam-200); stroke-width: 1.5; }

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent-500); color: #fff; }
.btn-primary:hover { background: var(--accent-600); transform: translateY(-2px) scale(1.03); box-shadow: var(--shadow-card); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-ghost { background: transparent; color: var(--navy-950); border-color: var(--foam-200); }
.btn-ghost:hover { border-color: var(--navy-950); background: var(--foam-100); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0); }

.btn-on-dark { background: #fff; color: var(--navy-950); }
.btn-on-dark:hover { background: var(--accent-500); color: #fff; transform: translateY(-2px) scale(1.03); box-shadow: var(--shadow-pop); }
.btn-on-dark:active { transform: translateY(0) scale(0.98); }

.btn-block { width: 100%; }

/* ==========================================================================
   NAV
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--foam-50) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--foam-200);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 76px; }

/* EDITAR AQUÍ: este bloque .brand es el espacio del logo. logo-oceansbest.png
   es un recorte del banner promocional del cliente (fondo de cielo/mar
   eliminado) — mejor calidad que el recorte anterior de la foto del
   camión, pero sigue siendo una foto y no un vector, así que no conviene
   ampliarlo mucho más de este tamaño. Cuando llegue el archivo del logo
   animado/vectorial definitivo, reemplaza el <img> de .logo-slot por ese
   archivo — el resto del nav no necesita cambios. */
.brand { display: flex; align-items: center; gap: 0.65em; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--navy-950); white-space: nowrap; }
.logo-slot { display: grid; place-items: center; flex-shrink: 0; }
.logo-slot img {
  display: block;
  height: 42px;   /* alto fijo en píxeles a propósito: un % aquí puede
                     resolver contra el alto intrínseco de la imagen en
                     vez del contenedor y hacerla enorme */
  width: auto;
  transform-origin: 50% 50%;
  animation: fish-swim 5s linear infinite;
}
footer .logo-slot img { height: 38px; }

/* Giro continuo de 360°, sin pausas — como si el pez estuviera nadando en
   círculo todo el tiempo. */
@keyframes fish-swim {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .logo-slot img { animation: none; } }

.nav-links { display: flex; align-items: center; gap: 2.1rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 0.94rem; font-weight: 500; color: var(--navy-700); transition: color 0.15s ease; }
.nav-links a:hover { color: var(--navy-950); }

.nav-toggle { display: none; background: none; border: none; padding: 0.4rem; }
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* El nombre completo de la marca ("Ocean's Best Group") es largo para una
   barra de nav angosta — se reduce en pasos en vez de envolverse en varias
   líneas o encimarse con el botón/hamburguesa. */
@media (max-width: 560px) {
  .brand { font-size: 1.02rem; }
  .nav .btn-primary { padding-inline: 1.1em; font-size: 0.86rem; }
}
@media (max-width: 420px) {
  .nav .btn-primary { display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

/* El hero ahora es el banner promocional que mandó el cliente, de pared a
   pared, con los dos botones de acción debajo — ya no hay titular propio
   ni olas/burbujas de fondo (el banner ya trae su propia foto de mar).
   Las animaciones de olas/burbujas se quedaron definidas más abajo en el
   archivo por si se vuelven a necesitar en otra sección. */
.hero { position: relative; background: var(--navy-950); padding-block: clamp(2rem, 5vw, 3rem); }

.hero-container { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }

.hero-banner {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  animation: hero-rise 0.7s cubic-bezier(.22,.61,.36,1) both;
}
.hero-banner img { width: 100%; height: auto; display: block; }

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: hero-rise 0.7s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: 0.15s;
}
.hero .btn-ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.hero .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner, .hero-actions { animation: none; }
}

/* Olas y burbujas decorativas — ya no se usan en el hero (el banner trae
   su propia foto), pero se dejan definidas por si se reutilizan en otra
   sección con fondo oscuro. */
.hero-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.hero-waves path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent-500) 55%, transparent);
  stroke-width: 1.5;
  animation: drift 14s ease-in-out infinite alternate;
}
.hero-waves path:nth-child(2) { animation-delay: -4s; opacity: 0.6; }
.hero-waves path:nth-child(3) { animation-delay: -9s; opacity: 0.35; }

@keyframes drift {
  from { transform: translateX(-3%) translateY(0); }
  to { transform: translateX(3%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-waves path { animation: none; }
}

.bubbles-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bubbles-bg span {
  position: absolute;
  bottom: -10%;
  width: var(--size, 10px);
  height: var(--size, 10px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-500) 45%, transparent);
  animation: rise var(--dur, 10s) ease-in infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes rise {
  from { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.55; }
  90% { opacity: 0.35; }
  to { transform: translateY(-115vh) translateX(var(--drift, 20px)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bubbles-bg { display: none; } }

/* ==========================================================================
   FRANJA "ATENDEMOS A"
   ========================================================================== */

.audience { padding-block: 2rem; border-bottom: 1px solid var(--foam-200); }
.audience .container { display: flex; align-items: center; gap: clamp(1.5rem, 5vw, 3.5rem); flex-wrap: wrap; }
.audience-label { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-400); flex-shrink: 0; }
.audience-tags { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.audience-tags span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-950);
  background: var(--foam-100);
  border: 1px solid var(--foam-200);
  padding: 0.45em 0.95em;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.audience-tags span:hover { background: var(--accent-50); border-color: var(--accent-500); transform: translateY(-2px); }

/* ==========================================================================
   PRODUCTOS
   ========================================================================== */

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.product-card {
  background: var(--foam-50);
  border: 1px solid var(--foam-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s ease;
}
.product-card.in-view { opacity: 1; transform: translateY(0); }
.product-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
.product-card:hover .product-photo img { transform: scale(1.035); }
.product-photo { transition: transform 0.4s ease; }

/* Foto real del producto. Si algún producto todavía no tiene foto, se
   puede volver a usar el placeholder anterior: un <div class="product-photo">
   con un <span>Foto: Nombre</span> adentro en vez del <img> — el fondo
   degradado de abajo sirve de placeholder visual mientras tanto. */
.product-photo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--foam-100), var(--foam-200));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.product-photo span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--navy-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-body { padding: 1.35rem 1.5rem 1.6rem; }
.product-body .trade-name { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-600); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4em; }
.product-body h3 { font-size: 1.15rem; margin-bottom: 0.4em; }
.product-body p { font-size: 0.92rem; }

@media (max-width: 940px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .product-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   POR QUÉ ELEGIRNOS
   ========================================================================== */

.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.value-card {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--foam-50);
  border: 1px solid var(--foam-200);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.value-card:hover { border-color: var(--accent-500); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.value-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-50); display: grid; place-items: center; margin-bottom: 1.1rem; transition: transform 0.3s ease; }
.value-icon svg { width: 19px; height: 19px; stroke: var(--accent-600); }
.value-card:hover .value-icon { transform: rotate(-6deg) scale(1.08); }
.value-card h3 { font-size: 1.02rem; margin-bottom: 0.4em; }
.value-card p { font-size: 0.88rem; }

@media (max-width: 940px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .value-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   NOSOTROS
   ========================================================================== */

.about .container { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

/* EDITAR AQUÍ: espacio para foto de instalaciones/equipo/flota. */
.about-media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--foam-200), var(--foam-100));
  border: 1px dashed var(--foam-200);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.about-media span { font-family: var(--font-mono); font-size: 0.8rem; color: var(--navy-400); }

.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--foam-200); }
.about-stats .stat-value { font-family: var(--font-display); font-size: 1.9rem; color: var(--accent-600); display: block; }
.about-stats .stat-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--navy-400); }

@media (max-width: 900px) { .about .container { grid-template-columns: 1fr; } .about-media { order: -1; } }

/* ==========================================================================
   UBICACIÓN Y CONTACTO
   ========================================================================== */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

.contact-info-list { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.contact-info-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-info-list .ico { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--foam-100); display: grid; place-items: center; flex-shrink: 0; }
.contact-info-list .ico svg { width: 17px; height: 17px; stroke: var(--accent-600); }
.contact-info-list strong { display: block; font-size: 0.95rem; }
.contact-info-list span, .contact-info-list a { font-size: 0.9rem; color: var(--navy-700); }
.contact-info-list a:hover { color: var(--accent-600); }

/* EDITAR AQUÍ: reemplaza el src del iframe con la ubicación real (Google
   Maps → Compartir → Insertar un mapa → copiar el src del iframe). */
.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--foam-200); aspect-ratio: 16 / 11; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--navy-950); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.75em 0.9em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--foam-200);
  background: var(--foam-50);
  color: var(--navy-950);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-600); outline-offset: 1px; border-color: transparent; }
.field textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 0.8rem; color: var(--navy-400); }

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

/* ==========================================================================
   CTA FINAL
   ========================================================================== */

.cta-band { position: relative; overflow: hidden; background: var(--navy-950); border-radius: var(--radius-lg); text-align: center; padding: clamp(2.5rem, 6vw, 4rem) var(--gutter); }
.cta-band h2 { position: relative; z-index: 1; color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); max-width: 22ch; margin-inline: auto 0.5em; }
.cta-band .lede { position: relative; z-index: 1; color: color-mix(in srgb, #fff 70%, transparent); max-width: 46ch; margin-inline: auto; margin-bottom: 1.75em; }
.cta-band .hero-actions { position: relative; z-index: 1; justify-content: center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer { background: var(--navy-950); color: color-mix(in srgb, #fff 75%, transparent); padding-block: clamp(2.5rem, 6vw, 3.5rem) 2rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent); }
footer .brand { color: #fff; margin-bottom: 0.85rem; }
.footer-brand p { font-size: 0.9rem; max-width: 30ch; color: color-mix(in srgb, #fff 60%, transparent); }
.footer-col h4 { font-family: var(--font-body); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in srgb, #fff 45%, transparent); margin-bottom: 1em; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: 0.65em; }
.footer-col a { font-size: 0.9rem; }
.footer-col a:hover { color: var(--accent-500); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; font-size: 0.82rem; color: color-mix(in srgb, #fff 40%, transparent); flex-wrap: wrap; }

@media (max-width: 780px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }