:root{
  --primary: var(--vibe-color-primary);
  --bg: #0b1220;
  --card: rgba(255,255,255,.06);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --border: rgba(255,255,255,.10);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background: linear-gradient(180deg, #070b14 0%, #0b1220 60%, #070b14 100%); color: var(--text); }
a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration: underline; }
.container{ width:min(1100px, 92vw); margin:0 auto; }

.header{
  position: sticky; top:0; z-index: 10;
  background: rgba(7,11,20,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px; }

.brand{ display:flex; align-items:center; gap:10px; }
.brand__dot{ width:10px; height:10px; border-radius:999px; background: var(--primary); box-shadow: 0 0 0 6px var(--vibe-color-primary); }
.brand__name{ font-weight: 700; letter-spacing: .2px; }

.nav{ display:flex; gap:16px; color: var(--muted); }
.nav a.active{ color: var(--text); }
.nav a:hover{ color: var(--text); text-decoration:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 600;
}
.btn--primary{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  position: relative;
}
.btn--primary::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:12px;
  background: linear-gradient(90deg, var(--primary), rgba(255,255,255,.12));
  opacity:.35;
  z-index:-1;
}
.btn--ghost{ color: var(--muted); }
.btn:hover{ transform: translateY(-1px); transition: .15s ease; }

.hero{ padding: 48px 0 10px; }
.hero__inner{ display:grid; grid-template-columns: 1.3fr .9fr; gap:24px; align-items: start; }
.kicker{ color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; margin: 0 0 10px; }
.hero__title{ font-size: 44px; line-height: 1.05; margin: 0 0 12px; }
.hero__subtitle{ color: var(--muted); font-size: 16px; line-height: 1.6; margin:0 0 18px; }
.hero__cta{ display:flex; gap:12px; flex-wrap: wrap; }

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
}
.card__title{ margin:0 0 10px; font-size: 18px; }
.muted{ color: var(--muted); }

.section{ padding: 34px 0; }
.section--alt{ background: rgba(255,255,255,.03); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section__title{ margin:0 0 8px; font-size: 26px; }
.section__subtitle{ margin:0 0 20px; color: var(--muted); }

.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.item{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}
.item h3{ margin:0 0 8px; }
.item p{ margin:0; color: var(--muted); line-height: 1.6; }

.split{ display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:start; }

.page__title{ margin:0 0 8px; font-size: 34px; }
.page__lead{ margin:0 0 18px; color: var(--muted); line-height: 1.6; }

.list{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
.list li{ margin: 8px 0; }
.divider{ height:1px; background: var(--border); margin: 14px 0; }
.spacer{ height: 16px; }

.form label{ display:block; margin-bottom: 12px; color: var(--muted); }
.form input, .form textarea{
  width:100%;
  padding:10px 12px;
  margin-top:6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
}
.form input:focus, .form textarea:focus{
  outline: none;
  border-color: var(--vibe-color-primary);
  box-shadow: 0 0 0 4px var(--vibe-color-primary);
}

.footer{ padding: 20px 0; color: var(--muted); }
.footer__inner{ display:flex; justify-content: space-between; gap:16px; border-top: 1px solid var(--border); padding-top: 16px; }

@media (max-width: 900px){
  .hero__inner, .split{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .nav{ display:none; }
  .hero__title{ font-size: 34px; }
}

/* vibe-frontend-agent-v0.2 */
/* Los Amigos visual style */
:root {
  --vibe-pln-primary: #ca8a04;
  --vibe-pln-secondary: #b91c1c;
  --vibe-pln-surface: #ffffff;
  --vibe-pln-soft-bg: #f8fafc;
  --vibe-pln-text: #111827;
}

body {
  color: var(--vibe-pln-text);
}

a {
  color: var(--vibe-pln-primary);
}

.hero,
.vibe-hero,
header,
.site-hero {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--vibe-pln-primary) 14%, white), color-mix(in srgb, var(--vibe-pln-secondary) 10%, white));
}

button,
.button,
.btn,
.cta,
.primary-cta,
.vibe-primary-cta,
a[href="/reservas"],
a[href="#contact"],
a[href^="mailto:"] {
  background: var(--vibe-pln-primary);
  color: #ffffff;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.16);
}

button:hover,
.button:hover,
.btn:hover,
.cta:hover,
.primary-cta:hover,
.vibe-primary-cta:hover {
  filter: brightness(0.94);
  transform: translateY(-1px);
}

.card,
.service-card,
.feature-card,
.vibe-ux-card,
section article {
  border-radius: 22px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
}

.vibe-ux-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 3rem auto;
  max-width: 1120px;
}

.vibe-ux-trust ul {
  padding-left: 1.25rem;
}

.vibe-ux-trust li::marker {
  color: var(--vibe-pln-primary);
}

@media (max-width: 768px) {
  .vibe-ux-section {
    grid-template-columns: 1fr;
    margin: 2rem 1rem;
  }
}
/* /vibe-frontend-agent-v0.2 */

/* vibe-visual-contrast-guard-v0.1 */
/* vibe-theme-agent-v0.3 */
/*
  Final frontend theme generated from PLN/classifier palette.
  Selected palette profile: yellow_red
*/

:root {
  --vibe-button-text: #ffffff;
  --vibe-color-accent: #dc2626;
  --vibe-color-accent-glow: rgba(220, 38, 38, 0.28);
  --vibe-color-accent-light: #fef2f2;
  --vibe-color-accent-soft: #fee2e2;
  --vibe-color-accent-strong: #b91c1c;
  --vibe-color-bg-dark: #713f12;
  --vibe-color-bg-dark-2: #854d0e;
  --vibe-color-primary: #facc15;
  --vibe-color-primary-glow: rgba(250, 204, 21, 0.35);
  --vibe-color-primary-light: #fefce8;
  --vibe-color-primary-soft: #fef3c7;
  --vibe-color-primary-strong: #ca8a04;
  --vibe-color-secondary: #facc15;
  --vibe-color-secondary-soft: #fef3c7;
  --vibe-color-surface: #a16207;
  --vibe-palette-accent-name: red;
  --vibe-palette-primary-name: yellow;
  --vibe-palette-secondary-name: yellow;
  --vibe-text-dark: #0f172a;
  --vibe-text-light: #ffffff;
  --vibe-text-muted-dark: #334155;
  --vibe-text-muted-light: #fef3c7;
}

html,
body {
  background:
    radial-gradient(circle at top left, var(--vibe-color-primary-glow), transparent 36%),
    linear-gradient(180deg, var(--vibe-color-bg-dark), var(--vibe-color-bg-dark-2)) !important;
  color: var(--vibe-text-light) !important;
}

header,
.site-header,
.header,
.navbar,
nav {
  background:
    linear-gradient(90deg, var(--vibe-color-bg-dark), var(--vibe-color-bg-dark-2)) !important;
  color: var(--vibe-text-light) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--vibe-color-primary-soft) 24%, transparent) !important;
}

header a,
.site-header a,
.header a,
.navbar a,
nav a {
  color: var(--vibe-color-primary-soft) !important;
}

header a:hover,
.site-header a:hover,
.header a:hover,
.navbar a:hover,
nav a:hover {
  color: #ffffff !important;
}

.brand__name,
.logo,
.brand {
  color: #ffffff !important;
}

.brand__dot,
.logo-dot,
.dot {
  background: var(--vibe-color-primary) !important;
  box-shadow: 0 0 0 4px var(--vibe-color-primary-glow) !important;
}

.hero,
.vibe-hero,
.landing-hero,
section.hero,
main > section:first-of-type {
  background:
    radial-gradient(circle at top right, var(--vibe-color-primary-glow), transparent 38%),
    radial-gradient(circle at bottom left, var(--vibe-color-accent-glow), transparent 34%),
    linear-gradient(135deg, var(--vibe-color-accent-light) 0%, var(--vibe-color-primary-light) 100%) !important;
  color: var(--vibe-text-dark) !important;
}

.hero h1,
.hero h2,
.hero h3,
.vibe-hero h1,
.vibe-hero h2,
.vibe-hero h3,
.landing-hero h1,
.landing-hero h2,
.landing-hero h3,
main > section:first-of-type h1,
main > section:first-of-type h2,
main > section:first-of-type h3 {
  color: var(--vibe-text-dark) !important;
}

.hero p,
.hero li,
.hero span,
.hero .muted,
.vibe-hero p,
.vibe-hero li,
.vibe-hero span,
.vibe-hero .muted,
.landing-hero p,
.landing-hero li,
.landing-hero span,
.landing-hero .muted,
main > section:first-of-type p,
main > section:first-of-type li,
main > section:first-of-type span,
main > section:first-of-type .muted {
  color: var(--vibe-text-muted-dark) !important;
}

.hero .card,
.hero .panel,
.hero aside,
.vibe-hero .card,
.vibe-hero .panel,
.vibe-hero aside,
main > section:first-of-type .card,
main > section:first-of-type .panel,
main > section:first-of-type aside {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--vibe-color-primary-light)) !important;
  border: 1px solid var(--vibe-color-primary) !important;
  box-shadow: 0 24px 70px var(--vibe-color-primary-glow) !important;
  color: var(--vibe-text-dark) !important;
}

.hero .card *,
.hero .panel *,
.hero aside *,
.vibe-hero .card *,
.vibe-hero .panel *,
.vibe-hero aside *,
main > section:first-of-type .card *,
main > section:first-of-type .panel *,
main > section:first-of-type aside * {
  color: var(--vibe-text-dark) !important;
}

section:not(:first-of-type),
.benefits,
.beneficios,
.plans,
.planes,
.services,
.servicios,
.features,
.vibe-ux-agent-section {
  background:
    radial-gradient(circle at top right, var(--vibe-color-primary-glow), transparent 40%),
    linear-gradient(180deg, var(--vibe-color-bg-dark), var(--vibe-color-bg-dark-2)) !important;
  color: var(--vibe-text-light) !important;
}

section:not(:first-of-type) h1,
section:not(:first-of-type) h2,
section:not(:first-of-type) h3,
section:not(:first-of-type) h4,
.benefits h1,
.benefits h2,
.benefits h3,
.beneficios h1,
.beneficios h2,
.beneficios h3,
.plans h1,
.plans h2,
.plans h3,
.planes h1,
.planes h2,
.planes h3,
.services h1,
.services h2,
.services h3,
.servicios h1,
.servicios h2,
.servicios h3,
.features h1,
.features h2,
.features h3,
.vibe-ux-agent-section h1,
.vibe-ux-agent-section h2,
.vibe-ux-agent-section h3 {
  color: #ffffff !important;
}

section:not(:first-of-type) h2::after,
.benefits h2::after,
.beneficios h2::after,
.plans h2::after,
.planes h2::after,
.services h2::after,
.servicios h2::after,
.features h2::after {
  content: "";
  display: block;
  width: 88px;
  height: 5px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vibe-color-accent), var(--vibe-color-primary)) !important;
}

section:not(:first-of-type) p,
section:not(:first-of-type) li,
section:not(:first-of-type) .muted,
.benefits p,
.benefits li,
.benefits .muted,
.beneficios p,
.beneficios li,
.beneficios .muted,
.plans p,
.plans li,
.plans .muted,
.planes p,
.planes li,
.planes .muted,
.services p,
.services li,
.services .muted,
.servicios p,
.servicios li,
.servicios .muted,
.features p,
.features li,
.features .muted,
.vibe-ux-agent-section p,
.vibe-ux-agent-section li,
.vibe-ux-agent-section .muted {
  color: var(--vibe-text-muted-light) !important;
}

.card,
.item,
.plan,
.service-card,
.feature-card,
.vibe-card {
  background:
    linear-gradient(145deg, var(--vibe-color-surface), var(--vibe-color-bg-dark-2)) !important;
  border: 1px solid color-mix(in srgb, var(--vibe-color-primary-soft) 24%, transparent) !important;
  border-left: 5px solid var(--vibe-color-accent) !important;
  color: var(--vibe-text-light) !important;
}

.card h1,
.card h2,
.card h3,
.item h1,
.item h2,
.item h3,
.plan h1,
.plan h2,
.plan h3,
.service-card h1,
.service-card h2,
.service-card h3,
.feature-card h1,
.feature-card h2,
.feature-card h3,
.vibe-card h1,
.vibe-card h2,
.vibe-card h3 {
  color: #ffffff !important;
}

.card p,
.card li,
.card .muted,
.item p,
.item li,
.item .muted,
.plan p,
.plan li,
.plan .muted,
.service-card p,
.service-card li,
.service-card .muted,
.feature-card p,
.feature-card li,
.feature-card .muted,
.vibe-card p,
.vibe-card li,
.vibe-card .muted {
  color: var(--vibe-text-muted-light) !important;
}

a.button,
button,
.btn,
.cta,
.primary,
.vibe-primary-cta,
.hero a[href],
nav .active {
  background: var(--vibe-color-accent) !important;
  color: var(--vibe-button-text) !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  box-shadow: 0 10px 26px var(--vibe-color-primary-glow) !important;
}

a.button:hover,
button:hover,
.btn:hover,
.cta:hover,
.primary:hover,
.vibe-primary-cta:hover {
  background: var(--vibe-color-accent-strong) !important;
  color: var(--vibe-button-text) !important;
}

a {
  color: var(--vibe-color-accent) !important;
}

a:hover {
  color: var(--vibe-color-accent-soft) !important;
}

input,
textarea,
select {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--vibe-text-dark) !important;
  border: 1px solid color-mix(in srgb, var(--vibe-color-primary) 42%, transparent) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: 3px solid var(--vibe-color-primary-glow) !important;
  border-color: var(--vibe-color-primary) !important;
}

/* /vibe-theme-agent-v0.3 */
/* /vibe-visual-contrast-guard-v0.1 */