/* ═══════════════════════════════════════════════════════════
   VWT · CONTACTO · identidad Vito
   Una sola pantalla: a la izquierda la invitación y los datos
   como lista grande; a la derecha el formulario en una tarjeta
   de humo con campos redondeados. Se conservan id, campos y
   scripts del formulario.
   ═══════════════════════════════════════════════════════════ */
.co{ --pad: clamp(1.4rem,5vw,6rem); --max: calc(1400px * var(--k, 1)); --sec: clamp(3.2rem,calc(7 * var(--1vh)),5.6rem); --t: .9s; --e: cubic-bezier(.22,1,.36,1);
     --acc: #AC3749; --vino: #6B1D2A; --ink: #0B0708; --soft: #3A3436; --mut: #7F6E73; --papel: #FFFFFF; --humo: #F6F2F0; --linea: rgba(11,7,8,.14); --linea-2: rgba(11,7,8,.3);
     font-family: 'Poppins', sans-serif; background: var(--papel); color: var(--ink) }
.co-in{ max-width: var(--max); margin-inline: auto; padding-inline: var(--pad) }
.co-kick{ display: block; margin: 0 0 1rem; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--acc) }
.co-h1{ margin: 0; font-size: calc(99.2px * var(--k, 1)); font-weight: 700; letter-spacing: -.055em; line-height: .94; max-width: 14ch }
.co-lead{ margin: clamp(1.2rem,2.4vw,1.8rem) 0 0; max-width: 44ch; font-size: calc(18.6px * var(--k, 1)); line-height: 1.6; font-weight: 300; color: var(--soft) }
.co-open{ margin-top: var(--nav-h, 62px); padding: var(--sec) 0 }
.co-open-grid{ display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: calc(80.0px * var(--k, 1)); align-items: start }

.co-datos{ list-style: none; margin: clamp(2rem,4vw,3rem) 0 0; padding: 0; border-top: 1px solid var(--linea) }
.co-datos li{ border-bottom: 1px solid var(--linea) }
.co-datos a, .co-datos-i{ display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k i" "v i" "s i"; align-items: center; padding: clamp(1rem,2vw,1.4rem) 0; text-decoration: none; color: inherit }
.co-datos-k{ grid-area: k; font-size: .78rem; font-weight: 600; color: var(--mut) }
.co-datos-v{ grid-area: v; margin-top: .2rem; font-size: calc(25.6px * var(--k, 1)); font-weight: 700; letter-spacing: -.04em; transition: color var(--t) var(--e) }
.co-datos-s{ grid-area: s; margin-top: .2rem; font-size: .9rem; font-weight: 300; color: var(--soft) }
.co-datos a i{ grid-area: i; font-style: normal; font-size: 1.6rem; color: var(--acc); transition: transform .6s var(--e) }
.co-datos a:hover .co-datos-v{ color: var(--acc) }
.co-datos a:hover i{ transform: translateX(4px) }

/* ═══════════════════════════════════════════════════════════
   LA CARTA · el formulario como frases que se completan
   Sin cajas ni etiquetas flotantes: el mensaje se escribe en
   oraciones, y cada dato es un hueco subrayado dentro de la
   frase. Los selectores se leen como palabras. Al enfocar, el
   subrayado pasa a bordó. Ids, nombres y clases del script se
   conservan.
   ═══════════════════════════════════════════════════════════ */
.co-carta-wrap{ padding-top: .4rem }
.co-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.co-l{ margin: 0 0 clamp(1.2rem,2.4vw,1.8rem); font-size: calc(38.4px * var(--k, 1)); font-weight: 300; letter-spacing: -.035em; line-height: 1.5; color: var(--ink) }
.co-c{ position: relative; display: inline-block; vertical-align: baseline; max-width: 100% }
.co-i, .co-s{
  appearance: none; -webkit-appearance: none; background: none; border: 0; border-bottom: 2px solid var(--linea-2); border-radius: 0;
  padding: 0 .1em .05em; margin: 0 .1em; color: var(--ink); font: inherit; font-weight: 600; letter-spacing: -.035em; line-height: 1.2;
  min-width: 6ch; width: auto; outline: none; transition: border-color var(--t) var(--e);
}
.co-i{ width: clamp(8ch, 16vw, 14ch) }
#cnt-email{ width: clamp(12ch, 20vw, 18ch) }
#cnt-telefono{ width: clamp(8ch, 14vw, 12ch) }
#cnt-fecha{ width: clamp(8ch, 14vw, 12ch) }
.co-i::placeholder{ color: var(--mut); font-weight: 300 }
.co-s{ cursor: pointer; padding-right: 1.1em; background-image: linear-gradient(45deg, transparent 50%, var(--acc) 50%), linear-gradient(135deg, var(--acc) 50%, transparent 50%); background-position: calc(100% - .55em) .55em, calc(100% - .25em) .55em; background-size: .3em .3em; background-repeat: no-repeat; max-width: 100% }

.co-c-pre .co-s{ min-width: 4.5ch }
.co-i:focus, .co-s:focus{ border-bottom-color: var(--acc) }
.co-i.lleno, .co-s.lleno{ border-bottom-color: var(--ink) }
.co-s:not(.lleno){ color: var(--mut); font-weight: 300 }
.co-l-msg{ margin-top: calc(38.4px * var(--k, 1))}
.co-c-msg{ display: block; width: 100% }
.co-t{ display: block; width: 100%; min-height: 4.2em; resize: vertical; background: none; border: 0; border-bottom: 2px solid var(--linea-2); padding: 0 0 .3em; color: var(--ink); font: inherit; font-size: calc(22.4px * var(--k, 1)); font-weight: 300; letter-spacing: -.02em; line-height: 1.45; outline: none; transition: border-color var(--t) var(--e) }
.co-t::placeholder{ color: var(--mut) }
.co-t:focus{ border-bottom-color: var(--acc) }
.co-env{ display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: calc(38.4px * var(--k, 1))}
.co-btn{ display: inline-flex; align-items: center; justify-content: center; padding: 1.05rem 2.1rem; border-radius: 100px; border: 0; cursor: pointer; background: var(--acc); color: #fff; -webkit-text-fill-color: #fff; font: inherit; font-size: .92rem; font-weight: 600; transition: background-color var(--t) var(--e), transform var(--t) var(--e) }
.co-btn:hover{ background: var(--vino); transform: translateY(-2px) }
.co-btn[disabled]{ opacity: .6; cursor: default; transform: none }
.co-nota{ margin: 0; font-size: .82rem; color: var(--mut) }
.co-carta-wrap .cnt-form-success{ display: none; align-items: center; gap: .8rem; padding: calc(32.0px * var(--k, 1)); border-radius: 18px; background: var(--vino); color: #fff; font-weight: 600 }
.co-carta-wrap .cnt-form-success.cnt-success-visible{ display: flex }
.co-carta-wrap .cnt-form-success svg{ width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; flex: 0 0 auto }
.co-carta-wrap .cnt-form-success p{ margin: 0; font-weight: 300 }

@media (max-width: 900px){ .co-open-grid{ grid-template-columns: 1fr } .co-l{ font-size: calc(25.6px * var(--k, 1))} .co-i{ width: clamp(8ch, 40vw, 14ch) } }
html[data-theme="dark"] .co, body.dark .co{ --ink: #F7F5F5; --soft: #DCD7D7; --mut: #ADA5A5; --papel: #000; --humo: #0C0A0A; --linea: rgba(255,255,255,.12); --linea-2: rgba(255,255,255,.26) }


/* la carta y sus selectores */
.co-carta{ display: block }
.co-c-sel{ display: inline-block }

.co-tx{ min-width: 0 }

/* ── afinado ──
   · los huecos crecen con lo que se escribe y nunca se salen de la frase
   · las opciones desplegadas toman el papel y la tinta del modo activo
   · el aviso de campo obligatorio se muestra en bordó, sin cajas
   · en oscuro, todo lee sobre negro */
.co-c{ max-width: 100% }
.co-i{ max-width: 100% }
.co-s option{ background: var(--papel); color: var(--ink); font-weight: 400 }
.co-i, .co-s{ border-top: 0 !important; border-left: 0 !important; border-right: 0 !important }
.co-i.falta, .co-s.falta{ border-bottom-color: var(--acc) !important }
.co-i.falta::placeholder{ color: var(--acc) }
.co-c-msg{ margin-top: .2rem }
.co-datos-i{ cursor: default }
html[data-theme="dark"] .co-i, html[data-theme="dark"] .co-s, html[data-theme="dark"] .co-t,
body.dark .co-i, body.dark .co-s, body.dark .co-t{ color: #F7F5F5; -webkit-text-fill-color: #F7F5F5 }
html[data-theme="dark"] .co-s:not(.lleno), body.dark .co-s:not(.lleno){ color: #ADA5A5; -webkit-text-fill-color: #ADA5A5 }
html[data-theme="dark"] .co-i::placeholder, html[data-theme="dark"] .co-t::placeholder, body.dark .co-i::placeholder, body.dark .co-t::placeholder{ color: #ADA5A5 }
html[data-theme="dark"] .co-i.lleno, html[data-theme="dark"] .co-s.lleno, body.dark .co-i.lleno, body.dark .co-s.lleno{ border-bottom-color: #F7F5F5 }
html[data-theme="dark"] .co-btn, body.dark .co-btn{ color: #fff; -webkit-text-fill-color: #fff }
@media (max-width: 560px){
  .co-l{ line-height: 1.7 }
  .co-c, .co-c-sel{ display: block; margin: .2rem 0 }
  .co-i, .co-s{ width: 100% !important; min-width: 0 }
  .co-c-pre{ display: inline-block; width: 38%; margin-right: 2% }
  .co-c-pre + .co-c{ display: inline-block; width: 58% }
}