/* =========================================
   RESETEO Y BASE
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
html { scroll-behavior: smooth; }


:root {
  --brand: #4DD9E6;
  --brand-dark: #008b91;
  --accent: #00c4d6;
  --danger: #c0392b;

  --text: #333;
  --bg: #fff;

  --shadow: 0 2px 8px rgba(0,0,0,.08);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.15);

  --radius: 8px;
  --radius-lg: 12px;
  --gap: 20px;

  --font-ui: 'Poppins', sans-serif;

  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1200px;

  --z-header: 1000;
  --z-overlay: 9998;
  --z-modal: 10000;

  /* escala de espaciado */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

body {
  font-family: var(--font-ui);
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.4;
  margin: 0;
}

/* Tipografía base */
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--text); }
p { margin-bottom: 1em; }

/* Enlaces */
a { color: inherit; text-decoration: none; }


/* Medios */
img, svg, video { max-width: 100%; height: auto; display: block; }

/* Contenedor genérico */
.container { max-width: 1200px; margin: 0 auto; padding-inline: 16px; }

/* Foco accesible */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto;
  }
}

/* Formularios base */
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid #ccc;
  border-radius: var(--radius);
}
button { cursor: pointer; }

/* Tablas */
table { width: 100%; border-collapse: collapse; }
th, td { padding: .75rem; border: 1px solid #e5e5e5; text-align: left; }
th { background: #f7f7f7; }

/* Selección de texto */
::selection { background: var(--brand); color: #fff; }

:root {
  --btn-primary: #14818c;   /* AA (≥4.5:1) con texto blanco */
  --btn-accent:  #00838f;   /* hover */
  --whatsapp:    #188741;   /* AA */
  --scroll-top:  #008487;   /* AA */
  --link-color:  #00838f;   /* AA */

  --z-overlay: 1000;
  --z-header: 1001;
}

a { color: var(--link-color); }
a:hover { text-decoration: underline; }

/* Formularios foco accesible */
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(77, 217, 230, 0.25);
}

/* Secciones: ancla suave */
.section,
.welcome,
.reviews,
.reservations,
.donde-encontrarnos,
.equipo { scroll-margin-top: 96px; }