:root {
  /* Brand palette — coral (producción) */
  --cream: #feffe4;
  --paper: #fbf9f1;
  --mint-soft: #bdece3;
  --mint: #95e1d3;
  --coral-soft: #f7b0b0;
  --coral: #f38181;
  --red: #ef5252;
  --ink: #1f1a1a;
  --ink-2: #4a3f3f;

  /* Fonts */
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --f-body: "DM Sans", system-ui, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  font-family: var(--f-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* No horizontal scroll from sub-pixel rounding while scaling */
html, body { overflow-x: hidden; }

/* Smooth in-page anchor jumps (e.g. #reservar, #planes) */
html { scroll-behavior: smooth; }

/* Menú móvil — animaciones del panel */
@keyframes pp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Component subtree resets (match prototype) */
.pp button { font: inherit; }
.pp { font-family: var(--f-body); color: var(--ink); }
.pp * { box-sizing: border-box; }
.pp a { color: inherit; }

.pp-mobile::-webkit-scrollbar { display: none; }
.pp-mobile { scrollbar-width: none; }

/* ───── Microanimations ───── */
@keyframes pp-float-1 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(8px,-14px) rotate(2deg); } }
@keyframes pp-float-2 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-10px,12px) rotate(-3deg); } }
@keyframes pp-float-3 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(6px,10px) rotate(1.5deg); } }
@keyframes pp-pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.7); } }
@keyframes pp-pulse-soft { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes pp-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.pp-float-1 { animation: pp-float-1 14s ease-in-out infinite; }
.pp-float-2 { animation: pp-float-2 18s ease-in-out infinite; }
.pp-float-3 { animation: pp-float-3 11s ease-in-out infinite; }
.pp-pulse-dot { animation: pp-pulse-dot 2.4s ease-in-out infinite; }
.pp-pulse-soft { animation: pp-pulse-soft 6s ease-in-out infinite; }

.pp-lift { transition: transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.35s; }
.pp-lift:hover { transform: translateY(-4px); }
.pp-tilt { transition: transform 0.4s cubic-bezier(.2,.7,.3,1); }
.pp-tilt:hover { transform: rotate(0deg) translateY(-3px) !important; }

.pp-reveal { transition: transform 0.6s cubic-bezier(.2,.7,.3,1), box-shadow 0.6s; }
.pp-reveal.pp-in { transform: rotate(0deg) translateY(-6px) scale(1.015) !important; box-shadow: 0 20px 38px rgba(31,26,26,0.16) !important; }
@media (prefers-reduced-motion: reduce) { .pp-reveal { transition: none; } }

.pp button { transition: transform 0.18s, box-shadow 0.18s; }
.pp button:hover { transform: translateY(-1px); }
.pp button:active { transform: translateY(0); }
.pp a { text-decoration: none; }
/* Make CTAs that are wrapped in <a> feel clickable across the whole pill */
.pp a:has(button) { cursor: pointer; }

image-slot {
  --is-bg: repeating-linear-gradient(135deg, #e9c8c0 0 12px, #f4d8d2 12px 24px);
  --is-fg: #5b3a3a;
  --is-border: rgba(91,58,58,0.25);
  --is-cap-bg: rgba(255,255,255,0.7);
}

/* Zoho Bookings widget — let it fill its card */
#inline-container iframe { width: 100% !important; border: 0; display: block; }

/* Loading splash while React + Babel compile */
#pp-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  transition: opacity .4s ease; 
}
#pp-splash.hide { opacity: 0; pointer-events: none; }
#pp-splash .dot {
  width: 14px; height: 14px; border-radius: 999px; background: var(--coral);
  animation: pp-pulse-soft 1.2s ease-in-out infinite;
}