/* Home That Shines — colores y letras del volante: marino, dorado y crema; Cinzel + Great Vibes + Montserrat. */
:root {
  --marino: #0b203c;
  --marino-2: #041934;
  --oro: #ae8a4e;
  --oro-claro: #c9a66b;
  --oro-texto: #86662f;      /* dorado legible en letra chica sobre crema */
  --crema: #fbf8f2;
  --crema-2: #f1ebe1;
  --gris: #5f6674;
  --blanco: #ffffff;
  --sombra: 0 18px 40px -22px rgba(11, 32, 60, 0.45);
  --radio: 18px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--marino);
  background:
    radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(900px 500px at 100% 60%, #f6efe3 0%, rgba(246, 239, 227, 0) 70%),
    var(--crema);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Burbujas de jabón (decoración) */
.burbujas { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.burbujas span {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.95) 0 12%, rgba(255, 255, 255, 0.25) 26%, rgba(214, 226, 240, 0.18) 60%, rgba(174, 138, 78, 0.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset -4px -6px 12px rgba(166, 190, 220, 0.25);
  animation: flotar 9s ease-in-out infinite alternate;
}
.burbujas span:nth-child(2n) { animation-duration: 12s; }
.burbujas span:nth-child(3n) { animation-duration: 15s; }
@keyframes flotar { from { transform: translateY(0); } to { transform: translateY(-18px); } }
@media (prefers-reduced-motion: reduce) { .burbujas span { animation: none; } html { scroll-behavior: auto; } }

main, .barra, .pie { position: relative; z-index: 1; }

/* Barra superior */
.barra {
  position: sticky; top: 0;
  z-index: 20; /* encima del contenido al hacer scroll (main también tiene z-index 1) */
  display: flex; align-items: center; gap: 18px;
  padding: 12px clamp(16px, 4vw, 48px);
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: rgba(251, 248, 242, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(174, 138, 78, 0.22);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca-icono { width: 54px; height: auto; }
.marca-texto { font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 1.12rem; letter-spacing: 0.06em; text-transform: uppercase; }
.marca-texto em { font-style: normal; color: var(--oro); }
.menu { display: flex; align-items: center; gap: 22px; }
.menu a { text-decoration: none; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.02em; }
.menu a:hover { color: var(--oro-texto); }
.menu .menu-cta { padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--oro); color: var(--marino); white-space: nowrap; }
.menu .menu-cta:hover { background: var(--oro); color: var(--marino); }
/* flex: none — la cápsula nunca se encoge (encogida, cortaba el botón ES en teléfonos angostos). */
.idioma { flex: none; display: flex; border: 1.5px solid rgba(11, 32, 60, 0.18); border-radius: 999px; overflow: hidden; }
.idioma button {
  font: 600 0.78rem Montserrat, sans-serif; letter-spacing: 0.08em; padding: 7px 11px; border: 0; cursor: pointer;
  background: transparent; color: var(--marino);
}
.idioma button[aria-pressed="true"] { background: var(--marino); color: var(--crema); }

/* Portada */
.portada { text-align: center; padding: clamp(36px, 7vw, 80px) 20px clamp(40px, 6vw, 70px); max-width: 980px; margin: 0 auto; }
.portada-casa { width: clamp(150px, 22vw, 230px); margin: 0 auto 4px; }
.titulo { margin: 0; line-height: 0.95; }
.titulo-home {
  display: block; font-family: Cinzel, Georgia, serif; font-weight: 600;
  font-size: clamp(4.2rem, 15vw, 9.6rem); letter-spacing: 0.08em; color: var(--marino);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
}
.titulo-shines {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: Cinzel, Georgia, serif; font-weight: 600; color: var(--oro);
  font-size: clamp(1.5rem, 5vw, 3rem); letter-spacing: 0.12em; margin-top: 6px;
}
.titulo-shines::before, .titulo-shines::after { content: ""; height: 2px; width: clamp(28px, 7vw, 80px); background: var(--oro); opacity: 0.8; }
.lema {
  margin: 18px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; font-size: clamp(0.82rem, 2.2vw, 1.02rem);
}
.lema::before, .lema::after { content: ""; height: 1.5px; width: 34px; background: var(--marino); opacity: 0.55; }
.corazon { color: var(--oro); font-size: 1.15em; letter-spacing: 0; }
.portada-texto { max-width: 58ch; margin: 22px auto 0; color: var(--gris); font-size: clamp(1rem, 2.4vw, 1.12rem); }
.portada-acciones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; text-decoration: none;
  font: 700 0.98rem Montserrat, sans-serif; letter-spacing: 0.03em; cursor: pointer; border: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:focus-visible, .idioma button:focus-visible, .menu a:focus-visible { outline: 3px solid var(--oro-claro); outline-offset: 3px; }
.boton-oro { background: linear-gradient(180deg, #c8a464 0%, #a8833f 100%); color: var(--marino); box-shadow: 0 10px 24px -12px rgba(140, 104, 46, 0.9); }
.boton-oro:hover { box-shadow: 0 14px 28px -12px rgba(140, 104, 46, 0.95); }
.boton-linea { border: 2px solid var(--marino); color: var(--marino); background: rgba(255, 255, 255, 0.6); }
.boton-marino { background: var(--marino); color: var(--crema); }
.boton[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* Banda de pilares (brochazo marino del volante) */
.pilares { padding: 10px clamp(12px, 4vw, 48px) 30px; }
.pilares ul {
  list-style: none; margin: 0 auto; max-width: 1100px; padding: 34px clamp(26px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  /* Brochazo marino con orillas irregulares, como la banda del volante (no se sale de la caja). */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23041934'/%3E%3Cstop offset='.55' stop-color='%230b203c'/%3E%3Cstop offset='1' stop-color='%2313294a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M34 22 C220 6 780 4 968 16 L986 34 L966 52 L994 72 L972 94 L996 118 L970 138 L990 160 L958 184 C720 198 290 196 44 186 L22 166 L40 146 L8 122 L30 100 L6 78 L28 58 L10 38 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 16px 22px rgba(11, 32, 60, 0.28));
}
.pilares li {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  color: var(--blanco); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 10px; position: relative; z-index: 1;
}
.pilares li + li { border-left: 1px solid rgba(201, 166, 107, 0.55); }
.pilares svg { width: 46px; height: 46px; fill: none; stroke: var(--oro-claro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Servicios + QR */
.servicios {
  max-width: 1040px; margin: 0 auto; padding: clamp(40px, 7vw, 80px) 20px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center;
}
.guion { font-family: "Great Vibes", "Brush Script MT", cursive; font-size: clamp(2rem, 5vw, 2.8rem); margin: 0; line-height: 1.1; color: var(--marino); }
.seccion-titulo {
  font-family: Cinzel, Georgia, serif; font-weight: 600; color: var(--oro); text-transform: uppercase;
  font-size: clamp(2.2rem, 6vw, 3.4rem); letter-spacing: 0.1em; margin: 0 0 14px; line-height: 1.1;
}
.servicios-texto p:not(.guion) { color: var(--gris); max-width: 46ch; margin: 0 0 24px; }
.qr { position: relative; justify-self: center; display: block; text-decoration: none; }
.qr img {
  width: min(260px, 70vw); height: auto; padding: 18px; background: var(--blanco); border-radius: 26px;
  box-shadow: var(--sombra), 0 0 0 1px rgba(174, 138, 78, 0.25);
}
.qr-flecha { position: absolute; width: 84px; left: -88px; top: 20px; }

/* Cotizar */
.cotizar { max-width: 1040px; margin: 0 auto; padding: clamp(30px, 6vw, 70px) 20px; }
.cotizar-cabeza { text-align: center; margin-bottom: 26px; }
.cotizar-cabeza p:not(.guion) { color: var(--gris); margin: 0 auto; max-width: 54ch; }
.forma {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px;
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(174, 138, 78, 0.28); border-radius: 28px;
  padding: clamp(20px, 4vw, 40px); box-shadow: var(--sombra);
}
.campo { display: flex; flex-direction: column; gap: 7px; grid-column: span 2; min-width: 0; }
.campo-medio { grid-column: span 1; }
.campo-ancho { grid-column: 1 / -1; }
.campo label { font-weight: 600; font-size: 0.9rem; }
.campo small { font-weight: 500; color: var(--gris); }
.campo input, .campo select, .campo textarea {
  font: 500 1rem Montserrat, sans-serif; color: var(--marino);
  border: 1.5px solid #d9d2c5; border-radius: 12px; padding: 12px 14px; background: var(--crema);
  width: 100%; min-height: 48px;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 4px rgba(174, 138, 78, 0.18); background: var(--blanco); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #b4232c; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.forma-pie { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.forma-nota { margin: 0; color: var(--gris); font-size: 0.85rem; }
.forma-estado { margin: 0; padding: 14px 16px; border-radius: 14px; font-weight: 600; }
.forma-estado.ok { background: #eef6ef; color: #1d5b32; border: 1px solid #b9dbc2; }
.forma-estado.error { background: #fbeeee; color: #8a1f26; border: 1px solid #ecc4c6; }

/* Contacto */
.contacto {
  max-width: 1040px; margin: 0 auto; padding: clamp(30px, 6vw, 60px) 20px clamp(40px, 7vw, 80px);
  display: grid; grid-template-columns: auto auto 1fr; gap: 18px 34px; align-items: center;
}
.contacto-dato { display: flex; align-items: center; gap: 14px; text-decoration: none; font-weight: 600; font-size: 1.08rem; }
.contacto-dato:hover { color: var(--oro-texto); }
.contacto-circulo { width: 46px; height: 46px; border-radius: 50%; background: var(--oro); display: grid; place-items: center; flex: none; }
.contacto-circulo svg { width: 22px; height: 22px; fill: var(--blanco); }
.gracias { justify-self: end; text-align: center; border-left: 1.5px solid rgba(174, 138, 78, 0.5); padding-left: 34px; }
.gracias-script { font-family: "Great Vibes", "Brush Script MT", cursive; font-size: 2.6rem; margin: 0; line-height: 1; }
.gracias-sub { margin: 6px 0 0; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78rem; }
.gracias-sub span:first-child { color: var(--oro); letter-spacing: 0; }

.pie { text-align: center; padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px)); color: var(--crema); background: var(--marino); font-size: 0.86rem; letter-spacing: 0.04em; }
.pie p { margin: 0; }
.pie-lema { white-space: nowrap; } /* el lema no se parte: en celular baja completo a la 2a línea */

/* Teléfono y tableta */
@media (max-width: 900px) {
  .menu a:not(.menu-cta) { display: none; }
  .pilares ul { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .pilares li:nth-child(3) { border-left: 0; }
  .servicios { grid-template-columns: 1fr; text-align: center; }
  .servicios-texto p:not(.guion) { margin-left: auto; margin-right: auto; }
  .qr-flecha { display: none; }
  /* Una columna centrada y los renglones alineados a la izquierda: íconos uno debajo del otro. */
  .contacto { grid-template-columns: fit-content(100%); justify-content: center; justify-items: start; }
  .contacto-dato { min-width: 0; overflow-wrap: anywhere; }
  .gracias { justify-self: center; border-left: 0; padding-left: 0; border-top: 1.5px solid rgba(174, 138, 78, 0.5); padding-top: 16px; }
}
@media (max-width: 620px) {
  .marca-texto { display: none; }
  .lema { letter-spacing: 0.14em; }
  .lema::before, .lema::after { display: none; }
  .pilares ul { padding: 30px 30px; }
  .menu .menu-cta { padding: 8px 12px; font-size: 0.84rem; }
  .barra { gap: 10px; }
  .marca-icono { width: 44px; }
  .idioma button { padding: 7px 9px; }
  .forma { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo { grid-column: 1 / -1; }
  .campo-medio { grid-column: span 1; }
  .campo-par { grid-column: 1 / -1; }
  .boton { width: 100%; }
  .portada-acciones { flex-direction: column; align-items: stretch; }
  .pilares li { font-size: 0.74rem; letter-spacing: 0.08em; }
  .pilares li + li { border-left: 0; }
}
/* Teléfonos muy angostos: no caben el botón de precio y los tres idiomas; el botón grande de la portada hace lo mismo. */
@media (max-width: 350px) {
  .menu { display: none; }
}