/* Mes de Sensibilización sobre el Cáncer de Mama, según el Manual de Uso y
   Estilo CUI.DATE v2.0:
   - Todo con los tokens del manual para texto sobre fondo oscuro (§08):
     #FFFFFF, #E3D2F5 y #B6A6C9. La única excepción es el rosa: no es un color
     de marca sino el símbolo de la campaña, y va solo en la cinta y en el punto
     del día de hoy.
   - Estilo de línea de la iconografía y el isotipo (§10): solo contorno, sin
     rellenos, trazo de grosor fijo aunque la cinta se escale.
   El estado final de cada elemento es el de este CSS: doodle.js solo anima la
   entrada, así que sin JS de animación (o con prefers-reduced-motion) se ve
   la escena completa y quieta. */
body.doodle-cancer-de-mama .doodle-capa {
    opacity: 1;
}

.dcm-cinta,
.dcm-linea,
.dcm-dia,
.dcm-scan {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dcm-cinta {
    stroke: #F4A0C6;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

/* La animación la hace crecer desde el borde izquierdo. */
.dcm-linea {
    stroke: #B6A6C9;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: 0 50%;
}

.dcm-dia {
    stroke: #B6A6C9;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.dcm-hoy {
    stroke: #FFFFFF;
}

.dcm-punto {
    fill: #F4A0C6;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

/* La línea del detector solo existe mientras barre la cinta. */
.dcm-scan {
    stroke: #FFFFFF;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    opacity: 0;
}

/* El mensaje va DEBAJO del formulario, fuera de él (es un hermano en el body),
   así que el flex del body lo acomoda solo en cualquier pantalla. */
.doodle-cm-mensaje {
    position: relative;
    z-index: 1;
    margin-top: 2.4rem;
    text-align: center;
    pointer-events: none;
}

.doodle-cm-mensaje strong {
    display: block;
    color: #FFFFFF;
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
}

.doodle-cm-mensaje span {
    display: block;
    margin-top: 0.4rem;
    color: #E3D2F5;
    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
}