/* Tulipanes Flowers · sitio público
   Dirección: tasteskill «split stage» — la mitad de la pantalla son las fotos reales del local, que no se van.
   Tipografía elegida por la familia: Cormorant Garamond (títulos) + Jost (textos). */
:root {
  --vino: #550707; --vino-2: #6A1010; --vino-3: #7C1C1C;
  --oro: #E6AC62; --oro-2: #F0C189;
  --papel: #F2F0EF;      /* hueso frío, tomado de las paredes blancas del local */
  --papel-2: #E6E1DF;    /* un paso de tono para separar superficies */
  --tarjeta: #FDFBFA;
  --tinta: #2A1512; --suave: #5E4A45;
  --sobre-oscuro: #F2F0EF; --sobre-oscuro-2: #D9CCC4;
  --musgo: #1E2410; --musgo-2: #2A3118;

  --f-titulo: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --f-texto: 'Jost', 'Segoe UI', system-ui, sans-serif;
  /* Cinco tamaños */
  --t-chico: 13px;
  --t-texto: 17px;
  --t-medio: 22px;
  --t-titulo: clamp(34px, 3.2vw, 44px);
  --t-grande: clamp(40px, 4.4vw, 64px);
  --t-nombre: clamp(96px, 19vw, 300px);

  --margen: clamp(20px, 3.4vw, 56px);
  --ease: cubic-bezier(.23, 1, .32, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 var(--t-texto)/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2 { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -0.015em; line-height: 1.02; margin: 0; text-wrap: balance; font-size: var(--t-titulo); }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--papel); padding: 8px 12px; z-index: 50; }
.saltar:focus { left: 8px; }
.num { font-variant-numeric: tabular-nums; }

/* Botones: rectángulo plano, esquinas rectas, un solo estilo */
.boton { display: inline-flex; align-items: center; justify-content: center; padding: 16px 26px; font: 500 var(--t-texto)/1 var(--f-texto);
  text-decoration: none; transition: transform 140ms var(--ease), background-color 180ms var(--ease); }
.boton:active { transform: scale(.97); }
.boton-oro { background: var(--oro); color: #2A1109; }
.boton-vino { background: var(--vino); color: var(--sobre-oscuro); }
.boton-chico { padding: 11px 18px; }
@media (hover: hover) and (pointer: fine) {
  .boton-oro:hover { background: var(--oro-2); }
  .boton-vino:hover { background: var(--vino-3); }
}

/* ── El escenario partido ────────────────────────────────────── */
.partido { display: grid; grid-template-columns: 44fr 56fr; align-items: start; }
.partido-invertido { grid-template-columns: 56fr 44fr; }
.lectura { min-width: 0; }
.escenario { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--vino-2); }
.cuadro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08);
  transition: opacity 1200ms var(--ease), transform 7000ms linear; }
.cuadro.activo { opacity: 1; transform: scale(1); }
.escenario-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 72px var(--margen) 28px; color: var(--sobre-oscuro);
  background: linear-gradient(to top, rgba(20, 8, 6, .62), rgba(20, 8, 6, 0)); /* taste-skill-ignore: velo neutro bajo texto sobre foto */
  display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.escenario-texto { font: italic 500 var(--t-medio)/1.25 var(--f-titulo); max-width: 30ch; }
.controles { display: flex; align-items: center; gap: 14px; flex: none; }
.puntos { display: flex; gap: 7px; }
.punto { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(246, 241, 236, .45); cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
.punto.activo { background: var(--oro); transform: scale(1.35); }
.pausa { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(246, 241, 236, .2); cursor: pointer; display: grid; place-items: center;
  transition: background-color 160ms var(--ease), transform 120ms var(--ease); }
.pausa:active { transform: scale(.94); }
.pausa span { width: 10px; height: 12px; border-inline: 3px solid var(--sobre-oscuro); }
.pausa[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 11px solid var(--sobre-oscuro); border-block: 7px solid transparent; margin-left: 3px; }

/* Portada */
.portada { min-height: 100svh; background: var(--vino); color: var(--sobre-oscuro); padding: 40px var(--margen) 48px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.marca img { width: clamp(150px, 13vw, 200px); }
.portada-texto { display: grid; gap: 22px; justify-items: start; }
.portada-texto > p { max-width: 38ch; }
.portada h1 { color: #FFF8EF; font-size: var(--t-grande); max-width: 12em; }
.portada-texto > p { font-size: var(--t-medio); line-height: 1.45; color: var(--sobre-oscuro); }

/* Carta de la familia */
.carta { padding: 160px var(--margen); max-width: calc(520px + 2 * var(--margen)); display: grid; gap: 22px; }
.carta-sello { width: 44px; height: 44px; border-radius: 50%; margin-bottom: 6px; }
.carta mark { background: var(--papel-2); color: inherit; padding: 0 .15em; }
.firma { margin-top: 10px; font: italic 500 var(--t-medio)/1.2 var(--f-titulo); }
.firma-lugar { margin-top: -16px; font-size: var(--t-chico); color: var(--suave); }

/* ── Catálogos a todo el ancho ───────────────────────────────── */
.catalogo, .funebre { padding: 160px var(--margen); }
.catalogo { background: var(--papel-2); }
.funebre { background: var(--musgo); color: var(--sobre-oscuro); }
.catalogo-cab { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.catalogo-cab p { max-width: 52ch; }
.funebre .catalogo-cab p { color: var(--sobre-oscuro-2); }
.rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; }
.arreglo a { display: grid; gap: 10px; text-decoration: none; }
.arreglo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--papel); transition: transform 500ms var(--ease); }
.funebre .arreglo img { background: var(--musgo-2); }
.arreglo-nombre { font: 600 var(--t-medio)/1.15 var(--f-titulo); }
.ref { font: 500 var(--t-chico)/1 var(--f-texto); color: var(--oro); background: var(--vino); padding: 3px 6px; margin-right: 10px; }
.funebre .ref { color: #2A1109; background: var(--oro); }
.arreglo-pedir { font-size: var(--t-chico); font-weight: 500; color: var(--vino); }
.funebre .arreglo-pedir { color: var(--oro); }
@media (hover: hover) and (pointer: fine) {
  .arreglo a:hover img { transform: scale(1.02); }
  .arreglo a:hover .arreglo-pedir { text-decoration: underline; text-underline-offset: 4px; }
}
.mas { margin-top: 48px; }
.mas summary { cursor: pointer; display: inline-flex; padding: 16px 26px; background: var(--oro); color: #2A1109; font-weight: 500; list-style: none;
  transition: transform 140ms var(--ease); }
.mas summary:active { transform: scale(.97); }
.mas summary::-webkit-details-marker { display: none; }
.mas[open] summary { display: none; }

/* ── Dedicatoria (lo que se puede hacer en la página) ────────── */
.dedicatoria, .pasos { padding: 140px var(--margen); max-width: calc(560px + 2 * var(--margen)); display: grid; gap: 22px; align-content: start; }
.tarjeta { background: var(--tarjeta); padding: 34px 32px; display: grid; gap: 16px; margin-block: 10px; }
.tarjeta-firmas { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--suave); }
.tarjeta b { color: var(--tinta); font-weight: 500; }
.tarjeta-mensaje { font: italic 500 var(--t-titulo)/1.15 var(--f-titulo); color: var(--vino); min-height: 1.25em; overflow-wrap: anywhere; }
.formulario { display: grid; gap: 8px; }
.formulario label { font-weight: 500; margin-top: 8px; }
.formulario input, .formulario textarea { width: 100%; font: 400 var(--t-texto)/1.4 var(--f-texto); color: var(--tinta); background: var(--tarjeta);
  border: 1px solid #CDBFB6; padding: 13px 14px; /* taste-skill-ignore: campo de formulario real */ border-radius: 0; resize: vertical; }
.formulario input:focus, .formulario textarea:focus { outline: 2px solid var(--vino); outline-offset: 0; border-color: var(--vino); }
.formulario .boton { margin-top: 14px; justify-self: start; }

/* ── Recibo de pedido ────────────────────────────────────────── */
.pasos { background: var(--papel-2); max-width: none; }
.pasos > h2, .pasos > p { max-width: 520px; }
.recibo { background: var(--tarjeta); padding: 30px 30px 52px; max-width: 480px; margin-top: 18px; font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 95% 100%, 90% calc(100% - 14px), 85% 100%, 80% calc(100% - 14px), 75% 100%, 70% calc(100% - 14px), 65% 100%, 60% calc(100% - 14px), 55% 100%, 50% calc(100% - 14px), 45% 100%, 40% calc(100% - 14px), 35% 100%, 30% calc(100% - 14px), 25% 100%, 20% calc(100% - 14px), 15% 100%, 10% calc(100% - 14px), 5% 100%, 0 calc(100% - 14px)); }
.recibo-grupo { font-weight: 600; margin-top: 26px; }
.recibo-grupo:first-child { margin-top: 0; }
.recibo-fila { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; }
.recibo-fila span:last-child { text-align: right; color: var(--suave); }
.recibo-total { display: flex; justify-content: space-between; gap: 16px; margin: 28px -30px 0; padding: 13px 30px; background: var(--tinta); color: var(--tarjeta); font-weight: 500; }

/* ── Contacto ────────────────────────────────────────────────── */
.contacto { background: var(--vino); color: var(--sobre-oscuro); padding: 48px 0 120px; overflow: hidden; display: grid; gap: 0; }
.tira { overflow: hidden; }
.tira-pista { display: flex; gap: 8px; width: max-content; animation: deriva 70s linear infinite; }
.tira-pista img { height: 150px; width: auto; }
.contacto:hover .tira-pista { animation-play-state: paused; }
@keyframes deriva { to { transform: translateX(-50%); } }
.contacto h2 { margin: 72px var(--margen) 40px; font-size: var(--t-grande); color: #FFF8EF; }
.celdas { margin-inline: var(--margen); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.celda { min-height: 104px; background: var(--vino-3); display: grid; align-content: center; justify-items: start; gap: 4px; padding: 18px 24px;
  font: 500 var(--t-medio)/1.2 var(--f-texto); text-decoration: none; transition: background-color 180ms var(--ease), transform 140ms var(--ease); }
.celda small { font: 400 var(--t-chico)/1.3 var(--f-texto); color: var(--sobre-oscuro-2); }
.celda-clara { background: var(--oro); color: #2A1109; }
.celda-clara small { color: #4A2A12; }
.celda:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .celda:hover { background: #8E2626; } .celda-clara:hover { background: var(--oro-2); } }
.letra-chica { margin: 16px var(--margen) 0; font-size: var(--t-chico); color: var(--sobre-oscuro-2); }
.letra-chica a { color: var(--sobre-oscuro); }

/* ── Cierre: el nombre sobre la última foto ──────────────────── */
.cierre { position: relative; min-height: 100svh; color: var(--sobre-oscuro); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.cierre > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); }
.cierre-arriba, .cierre-abajo { position: relative; padding: 32px var(--margen); }
.cierre-arriba { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cierre-arriba nav { display: flex; flex-wrap: wrap; gap: 8px 22px; max-width: 520px; }
.cierre-arriba a { text-decoration: none; }
.cierre-arriba a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cierre-arriba p { text-align: right; }
.cierre-nombre { font: 600 var(--t-nombre)/.8 var(--f-titulo); letter-spacing: -0.03em; margin-left: -.04em; }
.cierre-legal { font-size: var(--t-chico); color: var(--sobre-oscuro-2); margin-top: calc(var(--t-nombre) * .24); max-width: 90ch; }

/* ── Teléfono ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .partido, .partido-invertido { display: flex; flex-direction: column; }
  .escenario { order: -1; height: 50svh; width: 100%; z-index: 0; }
  .escenario-pie { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 56px; }
  .lectura { position: relative; z-index: 1; background: var(--papel); width: 100%; }
  .portada { min-height: 0; padding-top: 28px; padding-bottom: 40px; gap: 24px; }
  .marca img { width: 92px; }
  .portada-texto { gap: 16px; }
  .portada-texto > p { font-size: var(--t-texto); }
  .escenario-texto { font-size: var(--t-texto); }
  .carta, .dedicatoria, .pasos { padding-block: 96px; }
  .catalogo, .funebre { padding-block: 104px; }
  .catalogo-cab { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .tarjeta-mensaje { font-size: var(--t-medio); }
  .tira-pista img { height: 110px; }
  .celdas { grid-template-columns: 1fr; }
  .celda { min-height: 72px; }
  .cierre { min-height: 88svh; }
  .cierre-arriba { flex-direction: column; }
  .cierre-arriba p { text-align: left; }
}
@media (max-width: 420px) { .recibo { padding-inline: 20px; } .recibo-total { margin-inline: -20px; padding-inline: 20px; } }

/* ── Entradas (solo si el script corre; sin script todo se ve) ── */
.js .entra { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .entra.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .entra { transform: none; transition: opacity 300ms linear; }
  .cuadro { transition: opacity 600ms linear; transform: none !important; }
  .tira-pista { animation: none; }
  .boton, .celda, .arreglo img, .punto, .pausa { transition: none; }
}

/* ── Página de privacidad ────────────────────────────────────── */
.barra-legal { background: var(--vino); color: var(--sobre-oscuro); display: flex; align-items: center; justify-content: space-between; padding: 14px var(--margen); }
.marca-legal { font: 600 26px/1 var(--f-titulo); text-decoration: none; }
.legal { max-width: calc(720px + 2 * var(--margen)); padding: 72px var(--margen) 120px; }
.legal-fecha { color: var(--suave); font-size: var(--t-chico); margin-bottom: 14px; }
.legal h1 { margin-bottom: 22px; }
.legal h2 { font-size: 28px; margin: 44px 0 10px; color: var(--vino); }
.legal ul { padding-left: 20px; display: grid; gap: 6px; margin: 0; }
.legal a { color: var(--vino); font-weight: 500; }
.legal p + p { margin-top: 12px; }
.pie-legal { background: var(--vino); color: var(--sobre-oscuro-2); padding: 32px var(--margen); font-size: var(--t-chico); }