/* ============================================================================
   contacto.css — Formulario único de contacto de Cuidarles (contacto.html).

   Se carga DESPUÉS de mujer-static.css y solo añade lo propio de esta página:
   las dos columnas —«Tiene interés en:» a la izquierda, los datos a la derecha—,
   los tres desplegables encadenados y el bloque «Otra forma de contactar».
   Paleta y tipografía heredadas de las variables de marca (:root de mujer-static.css).

   CONTRATO DE RENDER: sin JavaScript los tres desplegables salen completos, el
   bloque de resúmenes es un <details> nativo que se abre sin código, y el
   formulario se ve entero. contacto.js solo oculta lo que no toca.
   ========================================================================== */

/* --- Cabecera de la página ------------------------------------------------ */
/* La seccion es tambien .wrap: aqui solo se toca arriba y abajo, y el limite de
   74ch va en los hijos. Antes el shorthand le quitaba el margen lateral (texto
   pegado al borde en movil) y el max-width sustituia al de .wrap, que se
   centraba y dejaba el titulo desalineado del formulario en escritorio. */
.ct-hero{padding-top:clamp(28px,4.5vw,64px);padding-bottom:clamp(14px,2vw,26px)}
.ct-hero > *{max-width:74ch}
.ct-hero .kicker{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:1rem}
.ct-hero h1{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.12;margin-bottom:1rem}
.ct-lead{font-size:1.08rem;color:var(--ink-soft);line-height:1.62}

/* --- Las dos columnas ----------------------------------------------------- */
.ct-seccion{padding-bottom:clamp(44px,6vw,88px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,3.4vw,52px);align-items:start}
.ct-col{min-width:0}
.ct-col > h2,.ct-form > h2{font-size:1.25rem;margin:0 0 1.1rem}

/* La columna del interés se queda a la vista mientras se rellenan los datos. */
@media(min-width:861px){
  .ct-col-interes{position:sticky;top:clamp(14px,2vw,28px)}
}

/* --- Campos (compartidos por los dos lados) -------------------------------- */
.ct-field{display:block;margin-bottom:1rem}
.ct-field > span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.ct-field input,.ct-field textarea,.ct-field select{width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--hair);border-radius:10px;padding:.78rem .9rem;outline:none;transition:.25s}
.ct-field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2327433A' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:12px 8px}
.ct-field input:focus,.ct-field textarea:focus,.ct-field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(39,67,58,.12)}
.ct-field textarea{resize:vertical;min-height:110px}
.ct-row{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:560px){.ct-row{grid-template-columns:1fr 1fr}}
.ct-opcional{font-style:normal;text-transform:none;letter-spacing:0;color:var(--muted)}

/* --- Resumen de lo que va a recibir --------------------------------------- */
/* Sin JS es un desplegable nativo con TODOS los resúmenes dentro. Con JS pasa a
   ser una caja fija que enseña solo el de la opción elegida. */
.ct-resumenes{margin:.2rem 0 1rem;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);padding:.85rem 1.05rem}
.ct-resumenes > summary{cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);list-style:none}
.ct-resumenes > summary::-webkit-details-marker{display:none}
.ct-resumenes.ct-res-js > summary{display:none}
.ct-res{font-size:.93rem;color:var(--ink-soft);line-height:1.55;margin:.55rem 0 0}
.ct-resumenes.ct-res-js .ct-res{margin:0}
.ct-res b{color:var(--ink);font-weight:600}
.ct-conteo{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}

/* --- Formulario ----------------------------------------------------------- */
.ct-form{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);padding:clamp(20px,2.6vw,32px)}
.ct-consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:.9rem;cursor:pointer;font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.ct-consent input{flex-shrink:0;width:19px;height:19px;margin:2px 0 0;accent-color:var(--pine,#27433A);cursor:pointer}
.ct-consent a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ct-submit{width:100%;margin-top:1.4rem}
.ct-submit:disabled{opacity:.55;cursor:not-allowed}
.ct-msg{margin-top:.9rem;font-size:.92rem;line-height:1.5;min-height:1.2em}
.ct-msg.err{color:var(--terra)}
.ct-msg.ok{color:var(--accent)}
.ct-nota{font-size:.86rem;color:var(--muted);line-height:1.55;margin-top:1rem}

/* Aviso que solo ve quien tiene JavaScript desactivado: el botón está inerte y
   se le ofrecen los dos canales que sí funcionan sin JS. */
.ct-noscript{margin-top:1rem;padding:.9rem 1rem;border:1px solid var(--terra);border-radius:10px;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.ct-noscript a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Honeypot: fuera de pantalla y fuera del foco. No es un campo real. */
.ct-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* --- Otra forma de contactar ---------------------------------------------- */
.ct-otra{margin-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--hair);padding-top:clamp(18px,2.4vw,26px)}
.ct-otra h2{font-size:1.15rem;margin:0 0 .9rem}
.ct-otra dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.1rem;font-size:.98rem;line-height:1.55}
.ct-otra dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);align-self:center}
.ct-otra dd{margin:0;color:var(--ink-soft)}
.ct-otra a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

@media(max-width:860px){
  .ct-grid{grid-template-columns:1fr}
  .ct-otra dl{grid-template-columns:1fr;gap:.2rem}
  .ct-otra dt{margin-top:.6rem}
}

/* Primera capa de proteccion de datos (details.pd1): mismo componente y mismas
   reglas que las landings (prehabilitacion.css). Sin ellas la tabla no se apilaba
   en movil y se salia de la pantalla por debajo de 360 px. */
.pd1{margin:.2rem 0;font-size:.82rem;line-height:1.5}.pd1>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.45rem;font-weight:500;color:inherit;text-decoration:underline;text-underline-offset:2px}.pd1>summary::-webkit-details-marker{display:none}.pd1-i{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;border:1px solid currentColor;border-radius:50%;font-family:"IBM Plex Mono",monospace;font-size:.78em;line-height:1;flex:0 0 auto;text-decoration:none}.pd1-t{width:100%;border-collapse:collapse;margin:.7rem 0 0}.pd1-t th,.pd1-t td{text-align:left;vertical-align:top;padding:.45rem .55rem;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}.pd1-t th{font-weight:500;width:38%}.pd1-t td{font-weight:400}@media(max-width:620px){.pd1-t,.pd1-t tbody,.pd1-t tr,.pd1-t th,.pd1-t td{display:block;width:auto}.pd1-t th{border:0;padding-bottom:0}}

/* Caja del modo QA (contacto.html?qa=1). La inyecta contacto.js y solo existe
   con ese parametro: el paciente nunca la ve. Terracota y mono, el mismo codigo
   visual que las bandas DEMO, para que no se confunda con contenido de la
   pagina si alguien llega con el parametro puesto. */
.ct-qa{margin:0 0 .8rem;padding:.55rem .7rem;border:1px dashed var(--terra);border-radius:var(--r);background:color-mix(in srgb,var(--terra) 6%,transparent);font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.7;color:var(--terra);white-space:pre-wrap;word-break:break-word}