/* Prana 2026 — generado por bin/transpilar.py desde design_handoff_2026/. No editar a mano. */

html { scroll-behavior: smooth; }
  body { margin: 0; background: #0A0A0C; color: #F4F2F0; font-family: Chivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  * { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: #EF6616; }
  ::selection { background: #6D1A9D; color: #fff; }
  @keyframes spinSlow { to { transform: rotate(360deg); } }
  @keyframes marqueeL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes marqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  @keyframes aBreathe {
    0%   { transform: translate(-50%,-46%) scale(1); }
    50%  { transform: translate(-54%,-50%) scale(1.5); }
    100% { transform: translate(-50%,-46%) scale(1); }
  }
  @keyframes pranaRipple { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2.25); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; } }

html { scroll-behavior: smooth; }
  body { margin: 0; background: #0A0A0C; color: #F4F2F0; font-family: Chivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  * { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: #EF6616; }
  ::selection { background: #6D1A9D; color: #fff; }
  @keyframes pranaRipple { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2.25); opacity: 0; } }
  @keyframes spinSlow { to { transform: rotate(360deg); } }
  @keyframes cardIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

html { scroll-behavior: smooth; }
  body { margin: 0; background: #0A0A0C; color: #F4F2F0; font-family: Chivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  * { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: #EF6616; }
  ::selection { background: #6D1A9D; color: #fff; }
  [data-prose] > * { margin: 0; }
  [data-prose] p { font-size: clamp(1.05rem,1.2vw,1.25rem); line-height: 1.75; font-weight: 300; color: rgba(244,242,240,0.82); text-wrap: pretty; }
  [data-prose] h2, [data-prose] h3 { font-family: Boldonse, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1.62; font-size: clamp(1.1rem,1.6vw,1.5rem); color: #F4F2F0; margin-top: 0.6em; }
  [data-prose] blockquote { border-left: 2px solid #EF6616; padding: 4px 0 4px clamp(18px,2vw,28px); font-size: clamp(1.2rem,1.6vw,1.55rem); line-height: 1.6; font-weight: 300; font-style: italic; color: #F4F2F0; }
  [data-prose] a { color: #EF6616; text-decoration: underline; text-underline-offset: 4px; }
  [data-prose] strong { font-weight: 500; color: #F4F2F0; }
  [data-prose] ul { padding-left: 1.2em; font-size: clamp(1.05rem,1.2vw,1.2rem); line-height: 1.75; font-weight: 300; color: rgba(244,242,240,0.82); }
  @keyframes pranaRipple { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2.25); opacity: 0; } }
  @keyframes riseIn { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

html { scroll-behavior: smooth; }
  body { margin: 0; background: #0A0A0C; color: #F4F2F0; font-family: Chivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  * { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: #EF6616; }
  ::selection { background: #6D1A9D; color: #fff; }
  @keyframes cardIn { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

html { scroll-behavior: smooth; }
  body { margin: 0; background: #0A0A0C; color: #F4F2F0; font-family: Chivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  * { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: #EF6616; }
  ::selection { background: #6D1A9D; color: #fff; }
  @keyframes pranaRipple { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2.25); opacity: 0; } }
  @keyframes cardIn { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

html { scroll-behavior: smooth; }
  body { margin: 0; background: #0A0A0C; color: #F4F2F0; font-family: Chivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  * { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: #EF6616; }
  input::placeholder, textarea::placeholder { color: rgba(244,242,240,0.38); }
  select option { background: #16161B; color: #F4F2F0; }
  ::selection { background: #6D1A9D; color: #fff; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pranaRipple { from { transform: scale(1); opacity: 0.55; } to { transform: scale(2.25); opacity: 0; } }
  @keyframes cardIn { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

html { scroll-behavior: smooth; }
  body { margin: 0; background: #0A0A0C; color: #F4F2F0; font-family: Chivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  * { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: #EF6616; }
  ::selection { background: #6D1A9D; color: #fff; }
  @keyframes aBreathe { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
  @keyframes cardIn { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

html { scroll-behavior: smooth; }
  body { margin: 0; background: #0A0A0C; color: #F4F2F0; font-family: Chivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  * { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: #EF6616; }
  [data-prose] > * { margin: 0; }
  [data-prose] p { font-size: clamp(1.05rem,1.2vw,1.25rem); line-height: 1.75; font-weight: 300; color: rgba(244,242,240,0.82); text-wrap: pretty; }
  [data-prose] h2, [data-prose] h3 { font-family: Boldonse, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1.62; font-size: clamp(1.1rem,1.6vw,1.5rem); color: #F4F2F0; margin-top: 0.6em; }
  [data-prose] blockquote { border-left: 2px solid #EF6616; padding: 4px 0 4px clamp(18px,2vw,28px); font-size: clamp(1.2rem,1.6vw,1.55rem); line-height: 1.6; font-weight: 300; font-style: italic; color: #F4F2F0; }
  [data-prose] a { color: #EF6616; text-decoration: underline; text-underline-offset: 4px; }
  [data-prose] strong { font-weight: 500; color: #F4F2F0; }
  [data-prose] ul { padding-left: 1.2em; font-size: clamp(1.05rem,1.2vw,1.2rem); line-height: 1.75; font-weight: 300; color: rgba(244,242,240,0.82); }
  [data-prose] p, [data-prose] ul { font-size: clamp(1.08rem,1.25vw,1.28rem); line-height: 1.8; color: rgba(244,242,240,0.86); }
  ::selection { background: #6D1A9D; color: #fff; }
  @keyframes riseIn { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  @keyframes cardIn { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }


/* --- estados portados de style-hover / style-focus --- */

.hv01:hover, .hv01:focus-visible { color:#F4F2F0; }

.hv02:hover, .hv02:focus-visible { background:#EF6616; color:#0A0A0C; }

.hv03:hover, .hv03:focus-visible { transform:translateY(-2px); background:#F4F2F0; }

.hv04:hover, .hv04:focus-visible { border-color:rgba(244,242,240,0.7); background:rgba(244,242,240,0.1); color:#F4F2F0; }

.hv05:hover, .hv05:focus-visible { transform:scale(1.07); border-color:#EF6616; background:rgba(239,102,22,0.16); }

.hv06:hover, .hv06:focus-visible { transform:translateY(-3px); }

.hv07:hover, .hv07:focus-visible { color:#F4F2F0; transform:translateY(-3px); }

.hv08:hover, .hv08:focus-visible { transform:translateY(-2px); background:#EF6616; color:#0A0A0C; }

.hv09:hover, .hv09:focus-visible { border-color:#EF6616; color:#EF6616; }

.hv10:hover, .hv10:focus-visible { border-color:rgba(244,242,240,0.5); }

.hv11:hover, .hv11:focus-visible { background:rgba(244,242,240,0.08); }

.hv12:hover, .hv12:focus-visible { color:#EF6616; }

.hv13:hover, .hv13:focus-visible { transform:translateY(-6px); color:#F4F2F0; }

.hv14:hover, .hv14:focus-visible { transform:translateY(-2px); background:#EF6616; }

.fc01:focus-visible { border-color:rgba(239,102,22,0.7); }

.fc02:focus-visible { box-shadow:0 0 0 2px #EF6616; }

.hv15:hover, .hv15:focus-visible { border-color:#EF6616; background:rgba(239,102,22,0.1); color:#F4F2F0; }

.hv16:hover, .hv16:focus-visible { box-shadow:0 24px 70px rgba(0,0,0,0.34); }

.hv17:hover, .hv17:focus-visible { transform:scale(1); }

.hv18:hover, .hv18:focus-visible { transform:translateY(-4px); }

.hv19:hover, .hv19:focus-visible { background:#16161B; }

.hv20:hover, .hv20:focus-visible { opacity:1; }

.hv21:hover, .hv21:focus-visible { transform:translateY(-6px); }

.hv22:hover, .hv22:focus-visible { color:#0A0A0C; }

.hv23:hover, .hv23:focus-visible { border-color:#F4F2F0; color:#F4F2F0; }

.fc03:focus-visible { border-color:#EF6616; background:rgba(10,10,12,0.6); }

.hv24:hover, .hv24:focus-visible { border-color:#A855F7; background:rgba(244,242,240,0.07); transform:translateY(-4px); color:#F4F2F0; }

.hv25:hover, .hv25:focus-visible { border-color:#D96BA8; background:rgba(244,242,240,0.07); transform:translateY(-4px); color:#F4F2F0; }

.hv26:hover, .hv26:focus-visible { border-color:#7A7EF0; background:rgba(244,242,240,0.07); transform:translateY(-4px); color:#F4F2F0; }

.hv27:hover, .hv27:focus-visible { border-color:#EF6616; background:rgba(244,242,240,0.07); transform:translateY(-4px); color:#F4F2F0; }

.hv28:hover, .hv28:focus-visible { transform:translateY(-3px); color:#F4F2F0; }

.hv29:hover, .hv29:focus-visible { padding-left:14px; }

.hv30:hover, .hv30:focus-visible { transform:translateY(-2px); background:#F4F2F0; color:#0A0A0C; }

.hv31:hover, .hv31:focus-visible { border-color:#F4F2F0; }

.hv32:hover, .hv32:focus-visible { padding-left:clamp(8px,1.2vw,18px); color:#F4F2F0; }

.hv33:hover, .hv33:focus-visible { border-color:#EF6616; color:#F4F2F0; }

.hv34:hover, .hv34:focus-visible { border-color:rgba(244,242,240,0.5); color:#F4F2F0; }


/* --- Añadidos al handoff (escritos a mano, los concatena el transpilador) --- */

/*
 * Muro de marcas. Los PNG de `assets/logos/` ya vienen en blanco con fondo
 * transparente (los genera `bin/logos-mono.sh`), así que acá solo se regula el peso.
 */
.marca-celda img {
  /* el trim de logos-mono.sh saca el margen blanco, asi que el aire lo pone la celda */
  max-width: 74%;
  max-height: 56%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.58;
  transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.marca-celda:hover img {
  opacity: 1;
  transform: scale(1.06);
}

/*
 * Estados de pantalla. `partials/head.php` pone `data-estado` en el <body> y con eso se
 * reusa una misma maqueta para dos páginas, sin duplicar el HTML.
 *
 * contacto.php          -> formulario (y `error` si el POST volvió con problemas)
 * contacto-gracias.php  -> panel de agradecimiento
 */
[data-estado="gracias"] [data-r="form"]    { display: none !important; }
[data-estado="gracias"] [data-r="thanks"]  { display: flex !important; }
[data-estado="error"]   [data-r="summary"] { display: flex !important; }