/* ============================================================
   CONVENIOS PANACA  ·  /pages/convenios
   Hoja propia de la pagina. Solo carga aqui.

   Antes este archivo era el CSS que arrastro la migracion de Shopify:
   la pagina era un bloque de texto legal y el resto eran estilos del
   modal de compra duplicados (el modal vive en el layout con su
   propio modal-compra.css). Se reescribio completo.

   Todo se apoya en los tokens de panaca.css: --color-*, --font-*,
   --btn-path-* y --clip-zigzag-*. Aqui no se definen colores nuevos.
   ============================================================ */

/* --------------------------------------------
   HERO
   -------------------------------------------- */
.cv-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-color: var(--color-green-dark);
    background-image:
        linear-gradient(180deg, rgba(2, 61, 27, .10) 0%, rgba(2, 61, 27, .55) 45%, rgba(2, 61, 27, .92) 100%),
        url('../../media/produccion/panacaEntrada.webp');
    background-position: center 60%;
    background-size: cover;
}

.cv-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3.5rem var(--spacing-md) 2.75rem;
}

.cv-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-yellow);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .5rem 1.2rem;
    margin-bottom: 1rem;
    clip-path: var(--btn-path-4);
}

.cv-hero__title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2.1rem, 5.2vw, 3.9rem);
    line-height: 1.02;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0 0 .85rem;
    max-width: 16ch;
}

.cv-hero__title span {
    color: var(--color-yellow);
    display: block;
}

.cv-hero__lead {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.9vw, 1.2rem);
    color: rgba(255, 255, 255, .92);
    max-width: 62ch;
    line-height: 1.6;
    margin: 0 0 1.6rem;
}

.cv-hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.cv-btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: .9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    padding: .85rem 1.9rem;
    border: none;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.cv-btn--rojo {
    background: var(--color-red);
    color: var(--color-white);
    clip-path: var(--btn-path-4);
}

.cv-btn--rojo:hover {
    background: var(--color-red-dark);
    transform: translateY(-2px);
}

.cv-btn--claro {
    background: var(--color-white);
    color: var(--color-green-dark);
    clip-path: var(--btn-path-1);
}

.cv-btn--claro:hover {
    background: var(--color-cream);
    transform: translateY(-2px);
}

/* --------------------------------------------
   BLOQUE INTRO / COMO FUNCIONA
   -------------------------------------------- */
.cv-seccion {
    padding: var(--spacing-xl) 0;
    position: relative;
}

.cv-seccion--crema { background: var(--color-cream); }
.cv-seccion--blanca { background: var(--color-white); }

.cv-encabezado {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--spacing-lg);
}

.cv-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--color-red);
    margin-bottom: .5rem;
}

.cv-titulo {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin: 0 0 .7rem;
}

.cv-titulo span { color: var(--color-red); }

.cv-bajada {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-light);
    line-height: 1.65;
    margin: 0;
}

/* Pasos */
.cv-pasos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
}

.cv-paso {
    background: var(--color-white);
    border: 2px solid var(--color-gray);
    padding: 1.6rem 1.4rem;
    position: relative;
    clip-path: var(--btn-path-1);
}

.cv-paso__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--color-green-dark);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.25rem;
    border-radius: 50%;
    margin-bottom: .85rem;
}

.cv-paso__titulo {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.05rem;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin: 0 0 .4rem;
}

.cv-paso__texto {
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--color-text-light);
    line-height: 1.55;
    margin: 0;
}

/* --------------------------------------------
   FILTRO DE CONVENIOS
   -------------------------------------------- */
.cv-filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0 auto var(--spacing-lg);
    max-width: 1000px;
}

.cv-chip {
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-green-deep);
    background: var(--color-white);
    border: 2px solid var(--color-green-dark);
    padding: .45rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cv-chip:hover {
    background: var(--color-green-light);
}

.cv-chip[aria-pressed="true"] {
    background: var(--color-green-dark);
    color: var(--color-white);
}

/* --------------------------------------------
   TARJETAS DE CONVENIO
   -------------------------------------------- */
.cv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.cv-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray);
    border-top: 6px solid var(--color-green-dark);
    padding: 1.6rem 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.cv-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* El convenio con mas beneficio se marca para que salte a la vista. */
.cv-card--destacado {
    border-top-color: var(--color-red);
    box-shadow: var(--shadow-sm);
}

.cv-card[hidden] { display: none; }

.cv-card__top {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

.cv-card__icono {
    font-size: 1.9rem;
    line-height: 1;
}

.cv-card__nombre {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin: 0;
}

/* Cifra grande del titular */
.cv-card__cifra {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding-bottom: .9rem;
    margin-bottom: .9rem;
    border-bottom: 1px dashed var(--color-gray);
}

.cv-card__cifra-valor {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 3rem;
    line-height: .9;
    color: var(--color-red);
}

.cv-card__cifra-valor--gratis {
    font-size: 2.4rem;
    color: var(--color-green-dark);
}

.cv-card__cifra-texto {
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text-light);
    line-height: 1.3;
}

/* Fila de figuras: 1 titular + acompanantes */
.cv-personas {
    display: flex;
    align-items: flex-end;
    gap: .45rem;
    margin-bottom: .9rem;
    flex-wrap: wrap;
}

.cv-persona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    min-width: 46px;
}

.cv-persona__figura {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-cream-dark);
    color: var(--color-coco-deep);
}

/* El SVG hereda el color del circulo, por eso no se repinta por tarjeta. */
.cv-persona__figura svg {
    width: 19px;
    height: 19px;
    display: block;
}

.cv-persona--titular .cv-persona__figura {
    background: var(--color-green-dark);
    color: var(--color-white);
    box-shadow: 0 0 0 3px rgba(22, 109, 53, .22);
}

.cv-persona__etiqueta {
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 700;
    color: var(--color-green-deep);
    text-align: center;
    line-height: 1.1;
}

.cv-persona--titular .cv-persona__etiqueta { color: var(--color-red); }

.cv-personas__mas {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    align-self: center;
    padding: 0 .1rem;
}

.cv-card__detalle {
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0 0 .6rem;
}

/*  Las condiciones de la tarjeta, juntas y al fondo.

    El margen automatico vive AQUI y en ningun otro sitio: cuando lo tenian a la vez el
    parentesco y el boton, los dos se repartian el hueco sobrante y las tarjetas cortas
    abrian un claro en medio. Con uno solo, el pie baja hasta el fondo y el boton va
    pegado debajo.  */
.cv-card__pie {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: auto 0 0;
    padding-top: .6rem;
    border-top: 1px dashed var(--color-gray);
}

.cv-card__parentesco {
    font-family: var(--font-body);
    font-size: .74rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0;
}

/*  Dos columnas —el icono y el texto— para que la frase no se parta alrededor del
    simbolo, que es lo que pasa si los trozos quedan sueltos dentro del flex.  */
.cv-card__titular {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-family: var(--font-body);
    font-size: .74rem;
    color: var(--color-text-light);
    line-height: 1.45;
    margin: 0;
}

.cv-card__titular strong { color: var(--color-green-dark); }

/* --------------------------------------------
   INGRESO GRATIS
   -------------------------------------------- */
.cv-gratis {
    background: var(--color-green-deep);
    padding: var(--spacing-xl) 0;
    position: relative;
}

.cv-gratis .cv-titulo { color: var(--color-white); }
.cv-gratis .cv-titulo span { color: var(--color-yellow); }
.cv-gratis .cv-eyebrow { color: var(--color-yellow); }
.cv-gratis .cv-bajada { color: rgba(255, 255, 255, .82); }

.cv-gratis__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
}

.cv-gratis__item {
    background: rgba(255, 255, 255, .07);
    border: 2px solid rgba(245, 177, 34, .45);
    padding: 1.5rem 1.4rem;
    text-align: center;
    clip-path: var(--btn-path-1);
}

.cv-gratis__icono {
    font-size: 2.2rem;
    display: block;
    margin-bottom: .6rem;
}

.cv-gratis__sello {
    display: inline-block;
    background: var(--color-yellow);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .3rem .9rem;
    margin-bottom: .6rem;
    clip-path: var(--btn-path-3);
}

.cv-gratis__titulo {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 .45rem;
}

.cv-gratis__texto {
    font-family: var(--font-body);
    font-size: .87rem;
    color: rgba(255, 255, 255, .8);
    line-height: 1.55;
    margin: 0;
}

.cv-gratis__texto a {
    color: var(--color-yellow);
    font-weight: 600;
}

/* --------------------------------------------
   CAJAS DE COMPENSACION
   -------------------------------------------- */
.cv-cajas {
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-white);
    border: 2px dashed var(--color-yellow-dark);
    padding: 1.8rem 1.7rem;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}

.cv-cajas__icono {
    font-size: 2.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.cv-cajas__titulo {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.15rem;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin: 0 0 .45rem;
}

.cv-cajas__texto {
    font-family: var(--font-body);
    font-size: .92rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
}

/* --------------------------------------------
   REQUISITOS
   -------------------------------------------- */
.cv-requisitos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

.cv-requisito {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--color-white);
    border-left: 4px solid var(--color-red);
    padding: 1.1rem 1.2rem;
}

.cv-requisito__check {
    color: var(--color-green-dark);
    font-size: 1.1rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.cv-requisito__texto {
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--color-text);
    line-height: 1.55;
    margin: 0;
}

.cv-requisito__texto strong { color: var(--color-green-deep); }

/* --------------------------------------------
   CIERRE
   -------------------------------------------- */
.cv-cierre {
    background: var(--color-red);
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.cv-cierre__titulo {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 .6rem;
}

.cv-cierre__texto {
    font-family: var(--font-body);
    font-size: 1rem;
    color: rgba(255, 255, 255, .9);
    max-width: 56ch;
    margin: 0 auto 1.6rem;
    line-height: 1.6;
}

.cv-cierre__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

.cv-cierre .cv-btn--claro {
    background: var(--color-white);
    color: var(--color-red);
}

.cv-cierre .cv-btn--oscuro {
    background: var(--color-green-deep);
    color: var(--color-white);
    clip-path: var(--btn-path-4);
}

.cv-cierre .cv-btn--oscuro:hover {
    background: var(--color-black);
    transform: translateY(-2px);
}

/* ============================================================
   REGISTRO
   ------------------------------------------------------------
   El formulario donde la gente se inscribe con su familia.

   Los bloques y los botones llevan corte irregular (--btn-path-*),
   pero los CAMPOS no: un clip-path recorta el anillo de foco y deja
   sin rastro visible a quien navega con teclado. Van cuadrados y con
   borde, que ademas es lo que la gente reconoce como "campo".
   ============================================================ */

/* Variantes de boton que esta pagina necesita fuera del cierre. */
.cv-btn--oscuro {
    background: var(--color-green-deep);
    color: var(--color-white);
    clip-path: var(--btn-path-4);
}

.cv-btn--oscuro:hover {
    background: var(--color-black);
    transform: translateY(-2px);
}

.cv-btn--fantasma {
    background: transparent;
    color: var(--color-green-dark);
    border: 2px solid var(--color-green-dark);
}

.cv-btn--fantasma:hover:not(:disabled) {
    background: var(--color-green-dark);
    color: var(--color-white);
}

.cv-btn--fantasma:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.cv-btn--grande {
    font-size: 1.05rem;
    padding: 1.1rem 3rem;
}

/* Aviso cuando el registro no se puede ofrecer. */
.cv-aviso {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 780px;
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    background: var(--color-cream);
    border-left: 6px solid var(--color-yellow-dark);
    clip-path: var(--btn-path-1);
}

.cv-aviso--error {
    background: #FDECEC;
    border-left-color: var(--color-red);
}

.cv-aviso__icono { font-size: 1.6rem; line-height: 1; }
.cv-aviso p { margin: .4rem 0 0; color: var(--color-text-light); line-height: 1.6; }

/* --------------------------------------------
   BLOQUES DEL FORMULARIO
   -------------------------------------------- */
.cv-reg {
    max-width: 940px;
    margin: 0 auto;
}

.cv-reg__bloque {
    background: var(--color-white);
    border: none;
    margin: 0 0 1.5rem;
    padding: 2rem 2.25rem 2.25rem;
    box-shadow: var(--shadow-sm);
    clip-path: var(--btn-path-1);
    transition: opacity var(--transition-fast);
}

/* Los pasos que aun no tocan se ven apagados, no escondidos: asi la
   persona sabe de entrada cuanto falta. */
.cv-reg__bloque:disabled {
    opacity: .45;
    pointer-events: none;
}

.cv-reg__legend {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--color-green-deep);
    text-transform: uppercase;
}

.cv-reg__legend small {
    display: block;
    margin-top: .35rem;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
    color: var(--color-text-light);
}

.cv-reg__num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    background: var(--color-red);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    clip-path: var(--btn-path-4);
}

/* --------------------------------------------
   PASO 1 · ELEGIR CONVENIO
   -------------------------------------------- */
.cv-reg__entidades {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: .9rem;
}

.cv-reg__entidad { display: block; cursor: pointer; }

/* El radio se oculta a la vista pero no al lector de pantalla ni al
   teclado: sigue siendo el que recibe el foco y dispara el cambio. */
.cv-reg__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.cv-reg__entidad-caja {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    height: 100%;
    padding: 1.1rem 1.2rem;
    background: var(--color-cream);
    border: 2px solid transparent;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.cv-reg__entidad:hover .cv-reg__entidad-caja {
    border-color: var(--color-green-light);
    transform: translateY(-2px);
}

.cv-reg__radio:checked + .cv-reg__entidad-caja {
    background: var(--color-white);
    border-color: var(--color-red);
    box-shadow: var(--shadow-sm);
}

.cv-reg__radio:focus-visible + .cv-reg__entidad-caja {
    outline: 3px solid var(--color-green-dark);
    outline-offset: 3px;
}

.cv-reg__entidad-icono { font-size: 1.5rem; line-height: 1; }

.cv-reg__entidad-nombre {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--color-green-deep);
    text-transform: uppercase;
}

.cv-reg__entidad-cifra {
    font-size: .92rem;
    color: var(--color-text);
}

.cv-reg__entidad-cifra strong {
    color: var(--color-red);
    font-family: var(--font-body-bold);
}

.cv-reg__entidad-extra {
    font-size: .8rem;
    color: var(--color-text-light);
    line-height: 1.4;
}

/* --------------------------------------------
   CAMPOS
   -------------------------------------------- */
.cv-reg__campos,
.cv-familiar__campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.25rem;
}

.cv-campo { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.cv-campo--corto { grid-column: span 1; }
.cv-campo--ancho { grid-column: 1 / -1; }

.cv-campo label {
    font-family: var(--font-body-bold);
    font-size: .82rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-green-deep);
}

.cv-campo__opcional {
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

.cv-campo input,
.cv-campo select {
    width: 100%;
    padding: .8rem .9rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-white);
    border: 2px solid var(--color-gray);
    border-radius: 0;
    transition: border-color var(--transition-fast);
}

.cv-campo input:focus,
.cv-campo select:focus {
    outline: 3px solid var(--color-green-dark);
    outline-offset: 1px;
    border-color: var(--color-green-dark);
}

.cv-campo input:disabled,
.cv-campo select:disabled {
    background: var(--color-gray-light);
    color: var(--color-text-muted);
}

.cv-campo--malo input,
.cv-campo--malo select {
    border-color: var(--color-red);
}

.cv-campo__ayuda {
    margin: 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

/* --------------------------------------------
   PASO 3 · LA FAMILIA
   -------------------------------------------- */
.cv-reg__nota {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
    padding: .9rem 1.1rem;
    background: var(--color-cream);
    border-left: 5px solid var(--color-yellow);
    font-size: .9rem;
    line-height: 1.55;
    color: var(--color-text);
}

.cv-familia { display: flex; flex-direction: column; gap: 1rem; }

.cv-familiar {
    padding: 1.25rem 1.4rem 1.4rem;
    background: var(--color-cream);
    border-left: 5px solid var(--color-green-dark);
}

.cv-familiar__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cv-familiar__numero {
    font-family: var(--font-heading);
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-green-deep);
}

.cv-familiar__quitar {
    padding: .3rem .8rem;
    background: transparent;
    border: 2px solid var(--color-red);
    color: var(--color-red);
    font-family: var(--font-body-bold);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cv-familiar__quitar:hover {
    background: var(--color-red);
    color: var(--color-white);
}

.cv-familia__pie {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.cv-familia__cuenta {
    font-size: .87rem;
    color: var(--color-text-light);
}

/* --------------------------------------------
   PASO 4 · AUTORIZACIONES Y ENVIO
   -------------------------------------------- */
.cv-check {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--color-text);
    cursor: pointer;
}

.cv-check input {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .15rem;
    accent-color: var(--color-green-dark);
    cursor: pointer;
}

.cv-check a { color: var(--color-green-dark); }

.cv-reg__enviar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    margin-top: 1.75rem;
    text-align: center;
}

.cv-reg__aviso {
    max-width: 560px;
    margin: 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--color-text-light);
}

.cv-reg__error {
    margin: .3rem 0 0;
    font-family: var(--font-body-bold);
    font-size: .85rem;
    color: var(--color-red);
}

.cv-reg__error--general {
    margin-top: 1.25rem;
    padding: .8rem 1rem;
    background: #FDECEC;
    text-align: center;
}

/* --------------------------------------------
   CONFIRMACION
   -------------------------------------------- */
.cv-exito {
    max-width: 720px;
    margin: 0 auto;
    padding: 2.75rem 2.25rem;
    text-align: center;
    background: var(--color-cream);
    box-shadow: var(--shadow-sm);
    clip-path: var(--btn-path-1);
}

.cv-exito:focus { outline: none; }

.cv-exito__icono { font-size: 3rem; line-height: 1; }

.cv-exito__titulo {
    margin: .75rem 0 .5rem;
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-green-deep);
}

.cv-exito__texto {
    margin: 0 auto 1.75rem;
    max-width: 520px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text-light);
}

.cv-exito__codigo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: 1.2rem 2.4rem;
    background: var(--color-white);
    border: 3px dashed var(--color-green-dark);
}

.cv-exito__codigo-etiqueta {
    font-family: var(--font-body-bold);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.cv-exito__codigo-valor {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--color-red);
}

.cv-exito__copiar {
    margin-top: .3rem;
    padding: .3rem 1rem;
    background: transparent;
    border: 2px solid var(--color-green-dark);
    color: var(--color-green-dark);
    font-family: var(--font-body-bold);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
}

.cv-exito__copiar:hover {
    background: var(--color-green-dark);
    color: var(--color-white);
}

.cv-exito__pie {
    max-width: 540px;
    margin: 1.5rem auto 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--color-text-light);
}

.cv-exito__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    margin-top: 1.75rem;
}

/* Atajo desde las tarjetas de abajo hasta el formulario de arriba. */
.cv-card__registrar {
    margin-top: .9rem;
    padding: .7rem 1.2rem;
    background: var(--color-green-dark);
    border: none;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: var(--btn-path-4);
    transition: background var(--transition-fast);
}

.cv-card__registrar:hover { background: var(--color-red); }

/* --------------------------------------------
   RESPONSIVE
   -------------------------------------------- */
@media (max-width: 900px) {
    .cv-pasos { grid-template-columns: 1fr; }

    .cv-reg__bloque { padding: 1.6rem 1.5rem 1.8rem; }
}

@media (max-width: 640px) {
    .cv-hero {
        min-height: 340px;
    }

    /* En una columna: dos campos por fila dejan el numero de cedula
       en un hueco de 120 px donde no se lee lo que se escribe. */
    .cv-reg__campos,
    .cv-familiar__campos {
        grid-template-columns: 1fr;
    }

    .cv-reg__entidades { grid-template-columns: 1fr; }

    .cv-reg__bloque {
        padding: 1.4rem 1.1rem 1.6rem;
        clip-path: none;
    }

    .cv-reg__legend { font-size: 1.15rem; }

    .cv-exito {
        padding: 2rem 1.2rem;
        clip-path: none;
    }

    .cv-exito__codigo { padding: 1rem 1.4rem; width: 100%; }

    .cv-familia__pie { flex-direction: column; align-items: stretch; }
    .cv-familia__cuenta { text-align: center; }

    .cv-hero__content {
        padding: 2.5rem var(--spacing-sm) 2rem;
    }

    .cv-hero__title { max-width: none; }

    .cv-grid { grid-template-columns: 1fr; }

    .cv-cajas {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .cv-card__cifra-valor { font-size: 2.5rem; }

    .cv-btn {
        width: 100%;
        text-align: center;
    }
}

/* Quien pidio menos movimiento no lo recibe. */
@media (prefers-reduced-motion: reduce) {
    .cv-card,
    .cv-btn,
    .cv-reg__entidad-caja {
        transition: none;
    }

    .cv-card:hover,
    .cv-btn:hover,
    .cv-reg__entidad:hover .cv-reg__entidad-caja {
        transform: none;
    }
}