/* La web de Cave Studios (Arnold, 16 de octubre de 2026). Los mismos colores y
   letras que el logo y que My Cross: la noche cálida de la entrada de la app,
   la luz ámbar de la cueva, el vino y el crema. Las letras son las de la web
   de la app (latín, woff2), servidas desde aquí: nada se pide a otro sitio. */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/letras/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/letras/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/letras/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 400; font-display: swap; src: url('/letras/lora-400.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 600; font-display: swap; src: url('/letras/lora-600.woff2') format('woff2'); }

:root {
  --noche: #12100E;
  --noche-2: #1E1916;
  --crema: #F3ECE3;
  --crema-suave: #B9ADA2;
  --luz: #E0A04B;
  --vino: #9E2F2A;

  --fondo: #FBF9F6;
  --fondo-suave: #F3EEE7;
  --tarjeta: #FFFFFF;
  --texto: #1D1916;
  --texto-suave: #6E655D;
  --borde: #E6DED4;
  --acento: #9E2F2A;

  --letra: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --letra-libro: 'Lora', Georgia, 'Times New Roman', serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #171513;
    --fondo-suave: #1E1B18;
    --tarjeta: #23201C;
    --texto: #EFE9E2;
    --texto-suave: #ADA398;
    --borde: #34302B;
    --acento: #E3907D;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Los dos idiomas viven en la página; se ve uno. Sin JavaScript, español. */
html:not([data-idioma="en"]) [lang="en"] { display: none; }
html[data-idioma="en"] [lang="es"] { display: none; }

h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
a { color: var(--acento); }

.saltar {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--crema); color: var(--noche);
  padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.saltar:focus { top: 16px; }

:focus-visible { outline: 3px solid var(--luz); outline-offset: 3px; border-radius: 6px; }

.ancho { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ── La marca: el arco con su luz y "cave STUDIOS" ─────────────────────── */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.arco-chico { width: 28px; height: 28px; flex: none; }
.arco-chico path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; }
.arco-chico circle { fill: var(--luz); }
.palabra { display: inline-flex; align-items: baseline; gap: 6px; }
.cave { font-family: var(--letra-libro); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.studios { font-family: var(--letra); font-weight: 500; font-size: 12px; letter-spacing: 0.32em; opacity: 0.8; }

/* ── La portada: la noche de la cueva ──────────────────────────────────── */
.portada {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 62%, rgba(224, 160, 75, 0.16), transparent 70%),
    linear-gradient(180deg, var(--noche) 0%, var(--noche-2) 100%);
  color: var(--crema);
  padding: 0 0 72px;
}

.barra {
  max-width: 1040px; margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 20px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.barra .arco-chico { color: var(--crema-suave); }

.idioma {
  font: 500 14px/1 var(--letra);
  color: var(--crema);
  background: rgba(243, 236, 227, 0.06);
  border: 1px solid rgba(243, 236, 227, 0.22);
  border-radius: 999px;
  padding: 0 16px;
  min-height: 44px;
  cursor: pointer;
}
.idioma:hover { background: rgba(243, 236, 227, 0.12); }

.portada-dentro {
  max-width: 760px; margin: 0 auto; padding: 32px 20px 0;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

.cueva { position: relative; width: 168px; height: 168px; margin-bottom: 28px; }
.resplandor {
  position: absolute; left: 50%; top: 66%;
  width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 160, 75, 0.42) 0%, rgba(224, 160, 75, 0.12) 38%, transparent 68%);
  animation: respira 5s ease-in-out 1.6s infinite;
}
.arco-grande { position: relative; width: 100%; height: 100%; }
.arco-trazo {
  fill: none; stroke: var(--crema); stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  animation: levanta 1.4s cubic-bezier(.2, .7, .2, 1) both;
}
.luz { fill: var(--luz); animation: enciende 1.2s ease-out 1s both; }

@keyframes levanta { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes enciende {
  0% { opacity: 0; }
  30% { opacity: .9; }
  45% { opacity: .35; }
  70% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes respira {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.antetitulo {
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--luz);
  margin-bottom: 14px;
}

.portada h1 {
  font-family: var(--letra-libro); font-weight: 600;
  font-size: clamp(34px, 7vw, 56px); line-height: 1.12; letter-spacing: -0.015em;
  margin-bottom: 18px;
}

.bajada { font-size: clamp(17px, 2.2vw, 19px); color: var(--crema-suave); max-width: 600px; }

.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease;
}
.boton:active { transform: scale(.97); }
.boton-luz { background: var(--luz); color: #241606; }
.boton-luz:hover { background: #E8AE60; }
.boton-borde { color: var(--crema); border: 1px solid rgba(243, 236, 227, 0.3); }
.boton-borde:hover { background: rgba(243, 236, 227, 0.08); }

/* ── Las secciones ─────────────────────────────────────────────────────── */
.seccion { padding: 80px 0; }
.seccion-suave { background: var(--fondo-suave); }

.seccion h2 {
  font-family: var(--letra-libro); font-weight: 600;
  font-size: clamp(28px, 4.5vw, 38px); line-height: 1.2;
  margin-bottom: 32px;
}

.valores {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.valor {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 26px 24px;
}
.valor h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.valor p { color: var(--texto-suave); font-size: 16px; }
.icono {
  width: 28px; height: 28px; margin-bottom: 14px;
  fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* My Cross */
.producto { display: grid; gap: 32px; align-items: start; }
@media (min-width: 760px) {
  .producto { grid-template-columns: 160px 1fr; gap: 48px; }
}
.logo-my-cross {
  display: block; width: 112px; height: 112px; border-radius: 26px;
  box-shadow: 0 12px 32px rgba(116, 31, 28, 0.28);
}
@media (min-width: 760px) { .logo-my-cross { width: 140px; height: 140px; border-radius: 32px; } }

.producto-texto h2 { margin-bottom: 4px; }
.producto-texto > p + p, .producto-texto > p + ul, .producto-texto > ul + p { margin-top: 18px; }

.chip {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  padding: 6px 12px; border-radius: 999px;
  margin-bottom: 14px;
}
.lema { font-family: var(--letra-libro); font-size: 20px; font-style: normal; color: var(--texto-suave); }

.lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lista li { position: relative; padding-left: 26px; }
.lista li::before {
  content: ''; position: absolute; left: 4px; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--luz);
}

.nota {
  font-size: 15px; color: var(--texto-suave);
  border-top: 1px solid var(--borde); padding-top: 18px;
}

/* Contacto */
.contacto { text-align: center; max-width: 640px; }
.contacto h2 { margin-bottom: 14px; }
.contacto p { color: var(--texto-suave); }
.correo {
  display: inline-flex; align-items: center; min-height: 48px;
  margin-top: 20px;
  font-family: var(--letra-libro); font-size: clamp(22px, 4vw, 28px);
  color: var(--acento); text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--acento) 35%, transparent);
  overflow-wrap: anywhere;
}
.correo:hover { border-bottom-color: var(--acento); }

/* Pie */
.pie { background: var(--noche); color: var(--crema-suave); padding: 40px 0 max(40px, env(safe-area-inset-bottom)); font-size: 14px; }
.pie-dentro { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.marca-pie { color: var(--crema); margin-bottom: 6px; }
.marca-pie .arco-chico { color: var(--crema-suave); }
.pie-suave { opacity: .75; }

/* Con "reducir movimiento", todo quieto y la luz encendida. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* La página de "no encontrada": solo la noche y la cueva. */
.portada-sola { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; padding: 48px 0; }