/*
Theme Name: The Beach Ibiza
Theme URI: https://thebeachibiza.com
Template: hello-elementor
Author: Gecko Studio
Author URI: https://geckostudio.es
Description: Child theme editorial para Grupo The Beach Ibiza. Hello Elementor como reset.
Version: 1.0.0
Text Domain: thebeachibiza
*/

/* ============================================================
   PALETA + TIPOGRAFÍA (variables globales)
   Referencia: mock estático _mock/index.html
   ============================================================ */
:root {
  /* Marca */
  --tbi-ink: #16202B;
  --tbi-paper: #FAF8F4;
  --tbi-sand: #C8A586;
  --tbi-sand-text: #87603D; /* sand oscurecido (mismo tono) para TEXTO: 5,25:1 papel · 4,66:1 crema (WCAG AA) */
  --tbi-line: #E8E2D8;
  --tbi-cream: #F1EAE0;

  /* Acentos por local */
  --tbi-barra: #336699;
  --tbi-loko: #E41817;
  --tbi-barlovento: #B5732A;
  --tbi-beach: #2CCCD3;
  --tbi-beach-ink: #1FA3A9;

  /* Tipografía */
  --tbi-serif: "Playfair Display", "Times New Roman", serif;
  --tbi-sans: "Inter", -apple-system, system-ui, sans-serif;

  /* Layout */
  --tbi-container: 1280px;
  --tbi-gutter: clamp(20px, 4vw, 48px);

  /* Easing (curvas custom; las built-in son demasiado flojas para entradas) */
  --tbi-ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* entradas/reveal */
  --tbi-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);  /* panel drawer (iOS/Vaul) */
}

/* ============================================================
   OVERRIDE max-width 1140 del parent Hello Elementor
   (header/footer/site-main quedan full-width; el wrapper
   interno controla el max-width del contenido)
   ============================================================ */
.site-header:not(.dynamic-header),
.site-footer:not(.dynamic-footer),
body:not([class*="elementor-page-"]) .site-main {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}

/* ============================================================
   RESET tipográfico base (Hello sólo trae normalize)
   ============================================================ */
body {
  font-family: var(--tbi-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tbi-ink);
  background: var(--tbi-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tbi-serif,
h1, h2, h3 {
  font-family: var(--tbi-serif);
  font-weight: 500;
  line-height: 1.1;
}

h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }

a { color: inherit; text-decoration: none; }
/* El reset.css del parent (Hello Elementor) fuerza a:active/:hover a #336 (navy).
   Lo neutralizamos: los enlaces heredan el color de su contexto. Cada botón con
   fondo oscuro re-afirma su propio color en :hover/:focus (ver main.css). */
a:hover,
a:focus,
a:active { color: inherit; }
img, video { max-width: 100%; height: auto; display: block; }

/* ============================================================
   El resto del CSS específico vive en assets/css/main.css
   y se encola desde functions.php (separación legible).
   ============================================================ */