/* Bronstar · Invitaciones — mismo lenguaje que tech.bronstar.com.mx (kit oficial): fondo blanco, tinta esmeralda,
   el oro como único color cálido. Sin tarjetas ni cajas: la estructura la dan la tipografía, el aire y filetes finos. */
:root{
  --blanco:#FFFFFF;
  --marfil:#FCFBF8;
  --piedra:#E4E5E1;
  --tinta:#111C17;
  --pizarra:#4A5A52;
  --esmeralda:#0B5235;
  --oro:#C89F38;
  --oro-base:#B1882C;
  --oro-tinta:#8E6B1F;
  --oro-luz:#E7C656;
  --firma:linear-gradient(90deg, #095837 0%, #17643E 35%, #7D8E42 52%, #D2AC43 72%, #ECCD5E 92%, #C89F38 100%);
  --lapidaria:"Cinzel", "Trajan Pro", Georgia, serif;
  --editorial:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margen:clamp(16px, 4vw, 48px);
  --ancho:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--blanco);color:var(--tinta);font-family:var(--sans);font-size:16.5px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--editorial);font-weight:500;letter-spacing:-.01em;line-height:1.04}
h1 em,h2 em{font-style:italic;color:var(--oro-tinta)}
p,dl,dd{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:1.5px solid var(--esmeralda);outline-offset:4px;border-radius:2px}
::selection{background:rgba(200,159,56,.28)}
.saltar{position:absolute;left:16px;top:-60px;background:var(--tinta);color:var(--blanco);padding:10px 14px;z-index:50}
.saltar:focus{top:12px}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rotulo{font-family:var(--lapidaria);font-weight:500;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro-tinta);line-height:1.6}
.rotulo a{color:inherit;text-decoration:none}
.num{font-family:var(--lapidaria);font-weight:600;font-size:13px;letter-spacing:.18em;color:var(--oro-tinta)}
.centro{text-align:center;margin-top:48px}

/* ---------- acciones ---------- */
.boton{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:6px;border:1px solid var(--oro);
  background:linear-gradient(135deg, #07281A 0%, #0B5235 55%, #1E6D47 100%);color:#FCFBF8;text-decoration:none;
  font-weight:600;font-size:15px;letter-spacing:.02em;box-shadow:0 10px 30px -14px rgba(7,40,26,.55);transition:transform .25s, box-shadow .25s, border-color .25s}
.boton svg{width:19px;height:19px}
.boton:hover{transform:translateY(-2px);border-color:var(--oro-luz);box-shadow:0 14px 30px -12px rgba(200,159,56,.5)}
.enlace{font-weight:500;text-decoration:none;padding:4px 0;color:var(--tinta);
  background:linear-gradient(var(--oro), var(--oro)) 0 100% / 100% 1px no-repeat;transition:background-size .35s, color .2s}
.enlace:hover{color:var(--esmeralda);background-size:0 1px;background-position:100% 100%}
.enlace-flecha{display:inline-flex;align-items:center;gap:8px;color:var(--esmeralda);font-weight:600;font-size:14.5px;text-decoration:none}
.enlace-flecha svg{width:18px;height:18px;transition:transform .25s}
.enlace-flecha:hover svg{transform:translateX(3px)}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:40px}

/* ---------- barra ---------- */
.barra{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:40px;padding:20px var(--margen);transition:background-color .35s, box-shadow .35s, padding .35s}
.barra.con-fondo{background:rgba(255,255,255,.95);box-shadow:0 1px 0 var(--piedra);padding-top:12px;padding-bottom:12px}
.marca{margin-right:auto}
.marca img{height:40px;width:auto}
.menu{display:flex;gap:30px}
.menu a{font-size:14px;color:var(--pizarra);text-decoration:none;padding:4px 0;background:linear-gradient(var(--oro), var(--oro)) 0 100% / 0 1px no-repeat;transition:background-size .3s, color .2s}
.menu a:hover, .menu a[aria-current="page"]{color:var(--tinta);background-size:100% 1px}
.barra-wa{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--esmeralda);text-decoration:none}
.barra-wa svg{width:19px;height:19px}

/* ---------- portada: texto grande y la demo en dos pantallas ---------- */
.portada{position:relative;max-width:var(--ancho);margin:0 auto;padding:150px var(--margen) 110px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:56px;min-height:min(100svh, 980px)}
.portada::after{content:"";position:absolute;left:var(--margen);right:var(--margen);bottom:0;height:1px;background:var(--firma);transform-origin:0 50%;animation:abrir 1.8s .4s cubic-bezier(.65,0,.35,1) both}
.portada h1{margin-top:24px;font-size:clamp(3rem, 6vw, 6rem);line-height:.98;max-width:13ch}
.pagina-evento .portada h1, .portada-corta h1{max-width:16ch}
.portada-sub{margin-top:28px;max-width:540px;color:var(--pizarra);font-size:1.12rem}
.portada-corta{grid-template-columns:minmax(0,1fr);min-height:0;padding-bottom:84px}
.portada-corta .portada-texto{max-width:900px}
.portada-corta h1{font-size:clamp(2.8rem, 5.4vw, 5.2rem)}
@keyframes abrir{from{transform:scaleX(0)}}

.telefonos{position:relative;justify-self:center;width:min(100%, 440px);aspect-ratio:440/600;--px:0;--py:0}
.telefono{position:absolute;height:auto;border-radius:30px;border:1px solid var(--piedra);background:var(--marfil);
  box-shadow:0 40px 70px -40px rgba(17,28,23,.55), 0 10px 24px -16px rgba(17,28,23,.25)}
.telefono-frente{width:66%;right:0;top:0;transform:translate3d(calc(var(--px) * -10px), calc(var(--py) * -8px), 0)}
.telefono-atras{width:56%;left:0;top:14%;opacity:.96;transform:translate3d(calc(var(--px) * 14px), calc(var(--py) * 10px), 0) rotate(-4deg)}
.js .telefono{animation:entrar 1.4s cubic-bezier(.2,.7,.1,1) both}
.js .telefono-frente{animation-delay:.15s}
.js .telefono-atras{animation-delay:.35s}
@keyframes entrar{from{opacity:0;translate:0 40px}}

/* ---------- secciones ---------- */
.seccion{padding:clamp(88px, 11vw, 150px) 0 0}
.seccion-pegada{padding-top:clamp(48px, 6vw, 72px)}
.encabezado{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen);display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 48px;align-items:baseline}
.encabezado h2{font-size:clamp(2.2rem, 4.3vw, 4rem);max-width:900px}
.encabezado-nota{grid-column:2;margin-top:22px;max-width:560px;color:var(--pizarra)}

/* filete que se dibuja al entrar en pantalla */
.trazo{position:relative;border-top:1px solid var(--piedra)}
.trazo::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--firma);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s cubic-bezier(.2,.7,.1,1)}
.trazo.visto::before{transform:scaleX(1)}

/* entrada suave de bloques */
.js .aparece{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.1,1), transform .9s cubic-bezier(.2,.7,.1,1)}
.js .aparece.visto{opacity:1;transform:none}

/* pantallas de la demo */
.pantallas{max-width:var(--ancho);margin:64px auto 0;padding:0 var(--margen);display:grid;grid-template-columns:repeat(3, minmax(0, 300px));justify-content:center;gap:clamp(24px, 4vw, 64px)}
.pantallas li:nth-child(2){margin-top:64px}
.pantallas img{width:100%;height:auto;border-radius:26px;border:1px solid var(--piedra);box-shadow:0 36px 60px -40px rgba(17,28,23,.5)}
.pantallas p{margin-top:20px;font-family:var(--editorial);font-size:1.3rem;line-height:1.3;color:var(--tinta)}
.pantallas .num{display:block;margin-bottom:4px}

/* puntos, pasos e incluye: columnas con filete arriba */
.puntos, .pasos, .incluye{max-width:var(--ancho);margin:64px auto 0;padding:0 var(--margen);display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:56px 48px}
.puntos li, .pasos li, .incluye li{padding-top:28px}
.puntos h3, .pasos h3{margin-top:14px;font-size:clamp(1.7rem, 2.4vw, 2.2rem)}
.incluye h3{font-size:clamp(1.5rem, 2vw, 1.85rem)}
.puntos p, .pasos p, .incluye p{margin-top:12px;color:var(--pizarra);max-width:380px}

/* eventos: filas grandes que llevan a cada página */
.eventos{max-width:var(--ancho);margin:56px auto 0;padding:0 var(--margen)}
.eventos li:last-child{border-bottom:1px solid var(--piedra)}
.eventos a{display:grid;grid-template-columns:260px minmax(0,1fr) 28px;align-items:center;gap:8px 48px;padding:30px 0;text-decoration:none;transition:padding .4s cubic-bezier(.2,.7,.1,1)}
.evento-nombre{font-family:var(--editorial);font-weight:500;font-size:clamp(2rem, 3.4vw, 3rem);line-height:1}
.evento-linea{color:var(--pizarra)}
.eventos svg{width:24px;height:24px;color:var(--esmeralda);transition:transform .3s}
.eventos a:hover{padding-left:12px}
.eventos a:hover .evento-nombre{color:var(--esmeralda)}
.eventos a:hover svg{transform:translateX(4px)}

/* paquetes: tres columnas separadas por filetes, sin cajas */
.paquetes{max-width:var(--ancho);margin:64px auto 0;padding:0 var(--margen);display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:0 48px}
.paquete{padding-top:30px;display:flex;flex-direction:column}
.paquete-nombre{font-family:var(--lapidaria);font-weight:500;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro-tinta)}
.paquete-precio{margin-top:10px;font-family:var(--editorial);font-weight:500;font-size:clamp(3rem, 4.6vw, 4.2rem);line-height:1;letter-spacing:-.02em}
.paquete-signo{font-size:.55em;vertical-align:.55em;margin-right:2px;color:var(--oro-tinta)}
.paquete-moneda{font-family:var(--sans);font-size:13px;letter-spacing:.08em;color:var(--pizarra);vertical-align:middle}
.paquete-resumen{margin-top:16px;font-family:var(--editorial);font-size:1.3rem;line-height:1.3;max-width:320px}
.paquete-lista{margin-top:22px;display:grid;gap:10px;color:var(--pizarra);font-size:15px}
.paquete-lista li{position:relative;padding-left:22px}
.paquete-lista li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:1px;background:var(--oro)}
.paquete .enlace-flecha{margin-top:auto;padding-top:28px}

/* comparación */
.comparar{max-width:var(--ancho);margin:56px auto 0;padding:0 var(--margen)}
.comparar table{width:100%;border-collapse:collapse}
.comparar th, .comparar td{padding:18px 12px;border-bottom:1px solid var(--piedra);text-align:center;vertical-align:middle}
.comparar thead th{font-family:var(--lapidaria);font-weight:500;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--oro-tinta);border-bottom-color:var(--oro)}
.comparar thead th span{display:block;margin-top:4px;font-family:var(--editorial);font-size:1.5rem;letter-spacing:0;text-transform:none;color:var(--tinta)}
.comparar tbody th{text-align:left;font-weight:500;padding-left:0;width:46%}
.marca-si{color:var(--esmeralda);font-size:11px}
.marca-no{color:#A5ADA8}

/* preguntas frecuentes */
.preguntas{max-width:var(--ancho);margin:48px auto 0;padding:0 var(--margen) 0 calc(var(--margen) + 288px)}
.pregunta:last-child{border-bottom:1px solid var(--piedra)}
.pregunta summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:24px 0;font-family:var(--editorial);font-weight:500;font-size:clamp(1.35rem, 2vw, 1.7rem);line-height:1.25}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:"+";font-family:var(--sans);font-weight:400;font-size:22px;color:var(--oro-tinta);transition:transform .3s}
.pregunta[open] summary::after{transform:rotate(45deg)}
.pregunta div{padding:0 0 26px;max-width:640px;color:var(--pizarra)}

/* notas */
.lista-notas{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)}
.lista-notas > .nota:last-child{border-bottom:1px solid var(--piedra)}
.nota{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:6px 48px;align-items:baseline;padding:28px 0 30px}
.nota-titulo{font-family:var(--editorial);font-weight:500;font-size:clamp(1.5rem, 2.4vw, 2.05rem);line-height:1.18}
.nota-titulo a{text-decoration:none}
.nota-titulo a:hover{color:var(--esmeralda)}
.nota-resumen{margin-top:6px;color:var(--pizarra);font-size:15px}
.nota-estado{font-size:13px;color:var(--pizarra);text-align:right}
.articulo-cuerpo{max-width:720px;margin:56px auto 0;padding:0 var(--margen);display:grid;gap:20px;font-size:17px}
.articulo-cuerpo h2{margin-top:24px;font-size:clamp(1.8rem, 3vw, 2.4rem)}
.articulo-cuerpo ul, .articulo-cuerpo ol{padding-left:22px;list-style:disc;display:grid;gap:8px}

/* ---------- contacto ---------- */
.contacto{padding:clamp(96px, 12vw, 170px) 0 clamp(64px, 7vw, 96px)}
.separador{width:min(760px, calc(100% - 2 * var(--margen)));height:auto;margin:0 auto 72px}
.contacto-rejilla{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px 80px;align-items:start}
.contacto-texto h2{margin-top:18px;font-size:clamp(2.5rem, 5vw, 4.6rem)}
.contacto-texto > p:not(.rotulo){margin-top:22px;max-width:440px;color:var(--pizarra)}
.contacto-texto .boton{margin-top:34px}
.contacto-texto .contacto-otro{margin-top:16px;font-size:14.5px}
.mensaje{display:grid;gap:26px}
.mensaje-fila{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px}
.campo{display:grid;gap:2px;border-bottom:1px solid var(--piedra);transition:border-color .3s}
.campo:focus-within{border-color:var(--oro-base)}
.campo-rotulo{font-family:var(--lapidaria);font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-tinta)}
.campo input, .campo textarea, .campo select{width:100%;border:0;outline:0;border-radius:0;background:transparent;padding:6px 0 8px;font:inherit;font-size:16px;color:var(--tinta);resize:vertical;min-height:40px}
.campo select{appearance:none;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238E6B1F' stroke-width='1.3'/%3E%3C/svg%3E") right 2px center / 12px 8px no-repeat}
.campo textarea{min-height:84px}
.campo textarea::placeholder{color:#8C968F}
.mensaje-pie{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px}
.mensaje-nota{font-size:13px;color:var(--pizarra)}
.enviar{appearance:none;background:none;border:0;padding:4px 0;cursor:pointer;font-family:var(--sans)}
.enviar[disabled]{opacity:.5;cursor:default}
.mensaje-estado{min-height:1.4em;font-family:var(--editorial);font-size:1.4rem;color:var(--esmeralda)}
.mensaje-estado.error{color:var(--oro-tinta)}
.mensaje.enviado .mensaje-fila, .mensaje.enviado > .campo, .mensaje.enviado .mensaje-pie{display:none}
.trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- pie ---------- */
.pie{max-width:var(--ancho);margin:0 auto;padding:44px var(--margen) 52px;border-top:1px solid var(--piedra);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 48px;color:var(--pizarra);font-size:14px}
.pie-marca img{height:34px;width:auto;margin-bottom:12px}
.pie-enlaces, .pie-contacto{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
.pie a{color:var(--tinta);text-decoration:none}
.pie a:hover{color:var(--esmeralda)}
.pie-contacto{grid-column:1 / -1}
.pie-legal{grid-column:1 / -1;color:#7F8A84}

/* ---------- celular ---------- */
@media (max-width: 900px){
  .barra{flex-wrap:wrap;gap:6px 16px;padding-top:14px;padding-bottom:10px}
  .barra.con-fondo{padding-top:10px;padding-bottom:8px}
  .marca img{height:30px}
  .menu{order:3;width:100%;gap:20px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .menu::-webkit-scrollbar{display:none}
  .menu a{font-size:13.5px;white-space:nowrap}
  .portada{grid-template-columns:1fr;gap:48px;padding-top:128px;padding-bottom:72px;min-height:0}
  .portada h1{margin-top:16px}
  .telefonos{width:min(86%, 360px)}
  .encabezado{grid-template-columns:1fr;gap:16px}
  .encabezado-nota{grid-column:1;margin-top:4px}
  .pantallas{grid-template-columns:repeat(3, 72%);justify-content:start;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none;margin-top:44px;gap:18px}
  .pantallas::-webkit-scrollbar{display:none}
  .pantallas li{scroll-snap-align:center}
  .pantallas li:nth-child(2){margin-top:0}
  .puntos, .pasos, .incluye, .paquetes{grid-template-columns:1fr;gap:44px;margin-top:44px}
  .paquetes{gap:52px}
  .eventos a{grid-template-columns:minmax(0,1fr) 24px;gap:6px 16px;padding:24px 0}
  .evento-linea{grid-row:2;font-size:15px}
  .eventos svg{grid-row:1 / 3;grid-column:2}
  .comparar{overflow-x:auto}
  .comparar th, .comparar td{padding:14px 4px}
  .comparar thead th{font-size:10.5px;letter-spacing:.06em}
  .comparar thead th span{font-size:1.15rem}
  .comparar tbody th{font-size:14.5px;line-height:1.4;width:44%}
  .preguntas{padding-left:var(--margen)}
  .nota{grid-template-columns:1fr;gap:6px;padding:24px 0 26px}
  .nota-estado{text-align:left}
  .contacto-rejilla{grid-template-columns:1fr}
  .mensaje-fila{grid-template-columns:1fr}
  .separador{margin-bottom:52px}
  .pie{grid-template-columns:1fr}
}
@media (max-width: 380px){
  .boton{padding:15px 22px}
  .barra-wa span{display:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .aparece{opacity:1;transform:none}
}