/* =====================================================================
   modal.css — los cinco diálogos de la portada

   Cotización CNC, cotización medieval, detalle de servicio, ficha de
   evento y lupa de la galería de la forja. Se cargan después de
   portada.css, que es donde estaban antes dentro del mismo <style>.
   ===================================================================== */

/* ── El componente ──────────────────────────────────────────────────
   Los tres diálogos —cotización CNC, cotización medieval y detalle de
   servicio— eran tres copias del mismo componente. Aquí está una vez;
   lo que los distingue viaja en data-skin sobre el fondo oscuro.

   CAMINO ELEGIDO: <dialog> nativo con showModal()/close().

   Se probó primero y se midió: no rompe ni la presentación ni el JS.
   El elemento sigue siendo el velo a pantalla completa —position:fixed,
   inset:0— y el panel se sigue centrando con flex, así que ni una regla
   de piel cambia. A cambio, el navegador aporta de serie lo que el div
   no tenía: capa superior, role="dialog" y aria-modal implícitos, foco
   dentro al abrir y devuelto al cerrar, fondo inerte y Escape. Por eso
   en el JS no hay ni una línea de trampa de foco.

   El div cerrado era display:flex con opacity:0: invisible pero
   tabulable, y el teclado recorría veintiún controles de tres
   formularios que no estaban en pantalla. Un <dialog> cerrado es
   display:none y desaparece del orden de tabulación sin que nadie tenga
   que acordarse.

   Dos cosas hay que decirle al navegador:
   • Apagar su propia hoja: <dialog> nace con borde, fondo, padding,
     margen automático y un max-width de casi-viewport.
   • Animar la apertura. Un elemento que sale de display:none no
     transiciona por su cuenta: hacen falta @starting-style y
     transition-behavior: allow-discrete sobre display y overlay.
   ─────────────────────────────────────────────────────────────────── */
.modal-overlay,
.modal-evento-overlay,
.forge-zoom-overlay {
    /* Apagar la hoja del navegador para <dialog>. */
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    color: inherit;
}

/* El velo lo pinta el propio diálogo, como antes. El del navegador se
   apaga para no oscurecer dos veces. */
.modal-overlay::backdrop,
.modal-evento-overlay::backdrop,
.forge-zoom-overlay::backdrop {
    background: transparent;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    opacity: 0;
    transition: opacity 0.3s ease,
                display 0.3s allow-discrete,
                overlay 0.3s allow-discrete;
}

.modal-overlay[open] {
    display: flex;
    opacity: 1;
}

@starting-style {
    .modal-overlay[open] {
        opacity: 0;
    }
}

.modal-panel {
    width: 100%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-overlay[open] .modal-panel {
    transform: translateY(0) scale(1);
}

/* ── Pieles ─────────────────────────────────────────────────────── */
/* =========================================
   MODAL DE COTIZACIÓN METALCO (EMPRESA A)
   ========================================= */
.modal-overlay[data-skin="cnc"] {
    background: rgba(10, 15, 25, 0.9);
    z-index: 5000;
    backdrop-filter: blur(5px);
    padding: 20px;
}

[data-skin="cnc"] .modal-panel {
    background: #0d1421;
    border: 1px solid #00bfff;
    border-radius: 8px;
    max-width: 650px;
    padding: 35px;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 0 50px rgba(0, 191, 255, 0.1), 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* Scrollbar custom para el modal metalco */
[data-skin="cnc"] .modal-panel::-webkit-scrollbar {
    width: 8px;
}

[data-skin="cnc"] .modal-panel::-webkit-scrollbar-track {
    background: #080c14;
    border-radius: 4px;
}

[data-skin="cnc"] .modal-panel::-webkit-scrollbar-thumb {
    background: #00bfff;
    border-radius: 4px;
}

[data-skin="cnc"] .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

[data-skin="cnc"] .modal-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

[data-skin="cnc"] .modal-header-icon {
    font-size: 1.8rem;
    color: #00bfff;
    filter: drop-shadow(0 0 8px rgba(0, 191, 255, 0.5));
}

[data-skin="cnc"] .modal-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    color: #e0f2fe;
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[data-skin="cnc"] .modal-btn-cerrar {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

[data-skin="cnc"] .modal-btn-cerrar:hover {
    color: #00bfff;
    border-color: #00bfff;
    background: rgba(0, 191, 255, 0.1);
}

[data-skin="cnc"] .modal-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.5), transparent);
    margin-bottom: 25px;
}

[data-skin="cnc"] .modal-campo {
    margin-bottom: 20px;
}

[data-skin="cnc"] .modal-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

[data-skin="cnc"] .modal-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: #00bfff;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

[data-skin="cnc"] .modal-input,
[data-skin="cnc"] .modal-textarea {
    width: 100%;
    background: #080c14;
    border: 1px solid #1a2638;
    border-radius: 6px;
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    padding: 12px 15px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

[data-skin="cnc"] .modal-textarea {
    resize: vertical;
    min-height: 100px;
}

[data-skin="cnc"] .modal-input:focus,
[data-skin="cnc"] .modal-textarea:focus {
    border-color: #00bfff;
    box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.15);
}

[data-skin="cnc"] .modal-dropzone {
    border: 2px dashed #1a2638;
    border-radius: 8px;
    background: rgba(8, 12, 20, 0.5);
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
    transition: all 0.3s;
    position: relative;
}

[data-skin="cnc"] .modal-dropzone.dragover {
    border-color: #00bfff;
    background: rgba(0, 191, 255, 0.05);
}

[data-skin="cnc"] .modal-dropzone-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #8ab4d8;
}

[data-skin="cnc"] .modal-adjuntos-count {
    color: #00bfff;
    font-weight: bold;
}

[data-skin="cnc"] .modal-dropzone-icon {
    font-size: 2.2rem;
    margin-bottom: 15px;
    opacity: 0.7;
    color: #00bfff;
}

[data-skin="cnc"] .modal-dropzone-texto {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #aaa;
}

[data-skin="cnc"] .modal-dropzone-texto strong {
    color: #00bfff;
}

/* El selector de planos no puede ser display:none: así no lo alcanza el
   tabulador y no quedaba ninguna otra manera de adjuntar un DXF con el
   teclado. Se esconde de la vista pero sigue en el orden de foco, y la
   zona de arrastre enseña el anillo cuando lo recibe. */
[data-skin="cnc"] input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

[data-skin="cnc"] .zona-archivo {
    position: relative;
}

[data-skin="cnc"] .zona-archivo:focus-within {
    outline: 2px solid #00bfff;
    outline-offset: -4px;
}

[data-skin="cnc"] .modal-archivos-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

[data-skin="cnc"] .modal-archivo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #e0e0e0;
}

[data-skin="cnc"] .modal-archivo-borrar {
    color: #ff4444;
    cursor: pointer;
    font-weight: bold;
    padding: 0 5px;
}

[data-skin="cnc"] .modal-btn-enviar {
    width: 100%;
    background: linear-gradient(135deg, #0056b3, #00bfff);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 191, 255, 0.3);
}

[data-skin="cnc"] .modal-btn-enviar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 191, 255, 0.5);
    background: linear-gradient(135deg, #0066cc, #00ccff);
}

[data-skin="cnc"] .modal-btn-enviar:disabled {
    background: #1a2638;
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

[data-skin="cnc"] .modal-exito {
    display: none;
    text-align: center;
    padding: 40px 20px;
}

[data-skin="cnc"] .modal-exito-icono {
    font-size: 4rem;
    margin-bottom: 20px;
    color: #00bfff;
    filter: drop-shadow(0 0 15px rgba(0, 191, 255, 0.3));
}

[data-skin="cnc"] .modal-exito h3 {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

[data-skin="cnc"] .modal-exito p {
    font-family: 'Inter', sans-serif;
    color: #aaa;
    line-height: 1.6;
}

/* El aviso mantiene el color de advertencia aunque el modal CNC gane
   en especificidad con su selector de id. */
[data-skin="cnc"] .modal-exito p.modal-exito-aviso {
    color: #ffcc57;
    font-size: 0.85rem;
    line-height: 1.5;
}

[data-skin="cnc"] .modal-error {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.5);
    color: #ff6b6b;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    display: none;
}

/* =========================================
   MODAL DE COTIZACIÓN MEDIEVAL
   ========================================= */

/* Overlay oscuro de fondo */
.modal-overlay[data-skin="medieval"] {
    background: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    padding: 16px;
}

/* Panel principal del modal */
[data-skin="medieval"] .modal-panel {
    /* La trama de buril a 135 grados de la forja, sobre el mismo fondo:
       la ficha de pedido es una cartela más y hasta ahora era la única
       caja lisa de la marca. */
    background:
        repeating-linear-gradient(135deg,
            transparent 0 5px,
            color-mix(in srgb, var(--m-oro) 5%, transparent) 5px 6px),
        #111111;
    border: 1px solid #ffb300;
    border-radius: 12px;
    max-width: 720px;
    padding: 36px 40px 32px;
    transform: translateY(30px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95);
    scrollbar-width: thin;
    scrollbar-color: #ffb300 #1a1a1a;
}

/* Cabecera del modal */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.modal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-header-icon {
    font-size: 1.6rem;
    line-height: 1;
    /* El icono era un emoji y traía su propio color. Ahora es trazo con
       currentColor, así que se le da el mismo oro que al título de al
       lado; sin esto heredaba el blanco del cuerpo. */
    color: #ffb300;
}

.modal-titulo {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffb300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.modal-btn-cerrar {
    background: transparent;
    border: 1px solid #444;
    color: #888;
    font-size: 1.1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.modal-btn-cerrar:hover {
    border-color: #ffb300;
    color: #ffb300;
}

.modal-divider {
    border: none;
    border-top: 1px solid #2a2a2a;
    margin: 0 0 28px;
}

/* Grupos de campos */
.modal-campo {
    margin-bottom: 22px;
}

.modal-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}

.modal-label {
    display: block;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffb300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.modal-input,
.modal-textarea {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 7px;
    color: #e8e8e8;
    font-size: 0.93rem;
    padding: 12px 15px;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s;
    box-sizing: border-box;
    font-family: inherit;
}

/* El ejemplo de cada campo iba en #555 sobre el fondo del campo: 2,6:1,
   y es el único texto que dice qué se espera ahí dentro. */
.modal-input::placeholder,
.modal-textarea::placeholder {
    color: #8a9bb0;
}

.modal-input:focus,
.modal-textarea:focus {
    border-color: #ffb300;
    box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.12);
}

.modal-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Zona de drag & drop */
.modal-dropzone {
    border: 2px dashed #333;
    border-radius: 8px;
    background: #141414;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: border-color 0.25s, background 0.25s;
}

.modal-dropzone:hover,
.modal-dropzone.dragover {
    border-color: #ffb300;
    background: #1c1c10;
}

.modal-dropzone-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--m-esp-2xs);
    margin-bottom: 12px;
}

.modal-adjuntos-count {
    font-size: 0.75rem;
    color: #666;
    letter-spacing: 0.05em;
}

.modal-dropzone-icon {
    font-size: 2rem;
    color: #555;
    margin-bottom: 8px;
    display: block;
}

.modal-dropzone-texto {
    color: #666;
    font-size: 0.88rem;
}

.modal-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* Lista de archivos adjuntos — previsualizaciones */
.modal-archivos-lista {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.modal-archivo-tag {
    position: relative;
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.modal-archivo-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    /* Contrato de --foco, descrito en catalogo.css. */
    object-position: var(--foco, 50% 50%);
    border-radius: 4px;
    border: 1px solid #ffb30060;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #ffb300;
}

.modal-archivos-lista-metalco .modal-archivo-thumb {
    border-color: rgba(0, 191, 255, 0.38);
    color: #00bfff;
}

.modal-archivo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--foco, 50% 50%);
    border-radius: 4px;
}

.modal-archivo-name {
    font-size: 0.65rem;
    color: #aaa;
    text-align: center;
    word-break: break-all;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-archivo-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #c0392b;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.modal-archivo-del:hover {
    background: #e74c3c;
}

/* Mensaje de validación */
.modal-error {
    background: rgba(220, 60, 60, 0.12);
    border: 1px solid #c0392b;
    border-radius: 6px;
    color: #e74c3c;
    font-size: 0.85rem;
    padding: 10px 14px;
    margin-bottom: 18px;
    display: none;
}

.modal-error.visible {
    display: block;
}

/* Mensaje de éxito */
.modal-exito {
    text-align: center;
    padding: 40px 20px;
    display: none;
}

.modal-exito.visible {
    display: block;
}

.modal-exito-icono {
    font-size: 3rem;
    margin-bottom: 16px;
    color: #ffb300;
}

.modal-exito h3 {
    font-family: 'Cinzel', 'Georgia', serif;
    color: #ffb300;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.modal-exito p {
    color: #aaa;
    font-size: 0.9rem;
}

/* Advertencia del servidor junto al mensaje de éxito (ej: un adjunto
   rechazado). Sin texto no debe dejar hueco ni borde. */
.modal-exito p.modal-exito-aviso {
    margin-top: 16px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 179, 0, 0.55);
    border-radius: 6px;
    background: rgba(255, 179, 0, 0.1);
    color: #ffcc57;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: left;
}

.modal-exito p.modal-exito-aviso:empty {
    display: none;
}

/* Número de seguimiento. Es el dato que el cliente tiene que retener de esta
   pantalla, así que pesa más que el párrafo de cortesía que hay encima. */
.modal-exito p.modal-exito-codigo {
    margin-top: 16px;
    color: #e0f2fe;
    font-size: 0.95rem;
    font-weight: 600;
}

.modal-exito p.modal-exito-codigo:empty {
    display: none;
}

/* Aviso por WhatsApp. El JavaScript compone el enlace al recibir la respuesta
   del servidor y quita el `hidden`. */
.modal-exito-wa {
    margin-top: 18px;
}

/* `hidden` no basta por sí solo: .m-boton declara display: inline-flex y se lo
   come. Mismo caso que el atajo al panel en la barra. */
.modal-exito-wa[hidden] {
    display: none;
}

/* Botón de envío */
.modal-btn-enviar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    background: linear-gradient(135deg, #b8860b, #ffb300, #e6a500);
    color: #0a0a0a;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    padding: 16px 24px;
    cursor: pointer;
    margin-top: 10px;
    transition: filter 0.2s, transform 0.2s;
    font-family: 'Cinzel', 'Georgia', serif;
}

.modal-btn-enviar:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.modal-btn-enviar:disabled {
    cursor: not-allowed;
    filter: grayscale(0.6) brightness(0.7);
    transform: none;
}

/* ── LA LUPA DE LA GALERÍA ───────────────────────────────────────────
   Estaba escrita dos veces seguidas, con valores distintos en z-index,
   desenfoque, radios y tipografía del pie: mandaba la segunda copia y la
   primera solo servía para despistar. Aquí queda una, con los valores
   que de verdad se veían.

   También es <dialog>: cuando la lupa está abierta, la galería expandida
   que hay debajo queda inerte sin que el JS tenga que apagarla.
   ─────────────────────────────────────────────────────────────────── */
.forge-zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100002;
    cursor: zoom-out;
    opacity: 0;
    padding: 0;
    transition: opacity 0.3s ease,
                display 0.3s allow-discrete,
                overlay 0.3s allow-discrete;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.forge-zoom-overlay[open] {
    display: flex;
    opacity: 1;
}

@starting-style {
    .forge-zoom-overlay[open] {
        opacity: 0;
    }
}

.forge-zoom-content {
    max-width: 92%;
    max-height: 92%;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.forge-zoom-overlay[open] .forge-zoom-content {
    transform: scale(1);
}

.forge-zoom-content img {
    max-width: 100%;
    max-height: 85vh;
    border: 2px solid #cbb26a;
    border-radius: 8px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 1), 0 0 20px rgba(199, 161, 90, 0.3);
    object-fit: contain;
    background: #111;
}

/* Era un <span> con cursor de mano: ni recibía el foco ni respondía a
   Intro. Ahora es un botón de 44×44 con su nombre. */
.forge-zoom-close {
    position: absolute;
    top: -3rem;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #d4af37;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.forge-zoom-close:hover {
    color: #fff;
    transform: rotate(90deg);
}

.forge-zoom-caption {
    color: #e0ca9b;
    text-align: center;
    margin-top: 15px;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}

/* Flechas de navegación para zoom de galería */
.forge-zoom-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(199, 161, 90, 0.3);
    color: #d4af37;
    font-size: 2.5rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100008;
    transition: all 0.3s ease;
    user-select: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.forge-zoom-nav:hover {
    background: rgba(199, 161, 90, 0.2);
    border-color: #d4af37;
    color: #fff;
    box-shadow: 0 0 20px rgba(199, 161, 90, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.forge-zoom-nav.prev {
    left: 40px;
}

.forge-zoom-nav.next {
    right: 40px;
}

/* =========================================
   MODAL DE DETALLES DE SERVICIO (EMPRESA A)
   ========================================= */
.modal-overlay[data-skin="servicio"] {
    background: rgba(10, 15, 25, 0.9);
    z-index: 5500;
    backdrop-filter: blur(5px);
    padding: 20px;
}

[data-skin="servicio"] .modal-panel {
    background: #0d1421;
    border: 1px solid #00bfff;
    border-radius: 8px;
    max-width: 900px;
    padding: 35px;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 0 50px rgba(0, 191, 255, 0.1), 0 25px 50px rgba(0, 0, 0, 0.5);
    color: #e0f2fe;
    font-family: 'Inter', sans-serif;
}

[data-skin="servicio"] .modal-panel::-webkit-scrollbar {
    width: 8px;
}

[data-skin="servicio"] .modal-panel::-webkit-scrollbar-track {
    background: #080c14;
    border-radius: 4px;
}

[data-skin="servicio"] .modal-panel::-webkit-scrollbar-thumb {
    background: #00bfff;
    border-radius: 4px;
}

[data-skin="servicio"] .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

[data-skin="servicio"] .modal-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

[data-skin="servicio"] .modal-header-icon {
    font-size: 2.2rem;
    color: #00bfff;
    filter: drop-shadow(0 0 10px rgba(0, 191, 255, 0.4));
}

[data-skin="servicio"] .modal-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    color: #fff;
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[data-skin="servicio"] .modal-btn-cerrar {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

[data-skin="servicio"] .modal-btn-cerrar:hover {
    color: #00bfff;
    border-color: #00bfff;
    background: rgba(0, 191, 255, 0.1);
}

[data-skin="servicio"] .modal-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.5), transparent);
    margin-bottom: 25px;
}

[data-skin="servicio"] .modal-contenido {
    margin-bottom: 25px;
}

[data-skin="servicio"] .modal-descripcion {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 25px;
}

[data-skin="servicio"] .modal-especificaciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    background: rgba(8, 12, 20, 0.5);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(0, 191, 255, 0.2);
}

[data-skin="servicio"] .spec-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

[data-skin="servicio"] .spec-label {
    font-size: 0.8rem;
    color: #00bfff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

[data-skin="servicio"] .spec-value {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 2px solid #00bfff;
}

.modal-evento-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 5000;
    opacity: 0;
    padding: 0;
    transition: opacity 0.3s ease,
                display 0.3s allow-discrete,
                overlay 0.3s allow-discrete;
}

.modal-evento-overlay[open] {
    display: flex;
    opacity: 1;
}

@starting-style {
    .modal-evento-overlay[open] {
        opacity: 0;
    }
}
.modal-evento.modal-evento-amplio {
    background: linear-gradient(135deg, #161616, #050505);
    border: 2px solid #d4af37;
    border-radius: 12px;
    width: 95%;
    max-width: 900px;
    padding: 0; /* padding se maneja en las columnas */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.95), 0 0 20px rgba(212, 175, 55, 0.3);
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}
.modal-evento-overlay[open] .modal-evento {
    transform: translateY(0);
}
.modal-evento-split {
    display: flex;
    flex-wrap: wrap; /* Para mobile */
}
.modal-evento-info {
    flex: 1 1 50%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.modal-evento-imagen {
    flex: 1 1 50%;
    min-height: 300px;
    position: relative;
    background: #000;
}
.modal-evento-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* El encuadre de la foto del evento: contrato de --foco (catalogo.css). */
    object-position: var(--foco, 50% 50%);
    border-left: 2px solid #d4af37;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.modal-evento-img:hover {
    opacity: 1;
}
.modal-titulo-grande {
    font-family: 'Cinzel', serif;
    font-size: 2.3rem;
    color: #d4af37;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
    line-height: 1.2;
}
.modal-divider-corta {
    width: 60px;
    border: none;
    height: 4px;
    background: #d4af37;
    margin: 20px 0 25px 0;
    border-radius: 2px;
}
.modal-evento-fecha-resaltada {
    color: #d4af37;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
}
.modal-evento-resumen {
    color: #aaa;
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 3px solid #d4af37;
}
.modal-evento-desc-extendida {
    color: #e0e0e0;
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 20px;
}
.modal-btn-adquirir {
    display: none;
}
.modal-btn-adquirir:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
}
.btn-cerrar-evento {
    z-index: 10;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    top: 15px;
    left: 15px; /* Moved to left to not clash with image */
    right: auto;
}
.btn-cerrar-evento:hover {
    background: #d4af37;
    color: #000;
}

.modal-lugar-ajuste {
    margin-top: -10px;
    opacity: 0.8;
    font-size: 1rem;
}

.zona-archivo {
    cursor: pointer;
    display: block;
    padding: 20px;
}

.nota-formatos {
    color: #00bfff99;
    font-size: 0.75rem;
}

.modal-subtitulo-cnc {
    color: #00bfff;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}


/* =====================================================================
   ADAPTACIÓN — DOS ANCHOS, AL FINAL DE LA HOJA

   Eran siete bloques con cuatro puntos de corte (900, 768, 600 y 500)
   repartidos por el archivo, tres de ellos a 600 px diciendo cosas
   distintas del mismo diálogo. Aquí son dos —960 y 640— en orden
   descendente y al final, los mismos que usa portada.css salvo el de
   1280, que un diálogo no necesita porque nunca es más ancho que su
   contenido.
   ===================================================================== */

@media (max-width: 960px) {
    /* El detalle del evento pasa a una columna y la fotografía va
       arriba: en vertical, un texto largo antes de la imagen deja al
       visitante sin saber qué está mirando. */
    .modal-evento-imagen {
        border-left: none;
        border-top: 2px solid #d4af37;
        order: -1;
        min-height: 200px;
    }

    .modal-evento-img {
        border-left: none;
    }

    .modal-evento-info {
        padding: var(--m-esp-md);
    }

    .btn-cerrar-evento {
        left: auto;
        right: 15px;
    }

    /* Las flechas del zoom se apartan del borde y encogen, pero no por
       debajo de los 44 px que necesita un dedo. */
    .forge-zoom-nav {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.6rem;
    }

    .forge-zoom-nav.prev {
        left: var(--m-esp-xs);
    }

    .forge-zoom-nav.next {
        right: var(--m-esp-xs);
    }
}

@media (max-width: 640px) {
    /* Dos campos por fila no caben en 390 px: los formularios de las dos
       cotizaciones y la tabla de especificaciones pasan a una columna. */
    .modal-fila,
    [data-skin="servicio"] .modal-especificaciones {
        grid-template-columns: 1fr;
    }

    .modal-panel {
        padding: var(--m-esp-md);
        max-width: 95%;
    }

    [data-skin="servicio"] .modal-panel {
        width: 100%;
        max-height: 95vh;
    }

    [data-skin="servicio"] .modal-header {
        position: relative;
        align-items: flex-start;
        padding-right: 45px;
    }

    [data-skin="servicio"] .modal-btn-cerrar {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    [data-skin="servicio"] .modal-titulo {
        font-size: var(--m-txt-md);
        line-height: 1.2;
    }

    [data-skin="servicio"] .modal-header-icon {
        font-size: 1.6rem;
    }

    [data-skin="servicio"] .modal-descripcion {
        font-size: var(--m-txt-sm);
        line-height: 1.45;
        margin-bottom: var(--m-esp-xs);
    }

    [data-skin="servicio"] .modal-divider {
        margin-bottom: var(--m-esp-xs);
    }

    [data-skin="servicio"] .spec-value {
        font-size: var(--m-txt-sm);
        padding: 6px 10px;
    }
}

/* =====================================================================
   CUENTA DE CLIENTE

   Reutiliza el armazón de los demás modales —.modal-overlay, .modal-panel,
   .modal-campo, .modal-input— y añade sólo lo suyo: las pestañas, los
   avisos y la hoja del perfil.
   ===================================================================== */

/* El velo y el fondo del panel.
 *
 * `.modal-overlay` a secas no pinta ninguno de los dos: los pintan los
 * bloques [data-skin="cnc"], ["medieval"] y ["servicio"]. Este diálogo no
 * lleva piel a propósito —tiene que servir a las dos marcas, y el visitante
 * puede cambiarlas sin recargar—, así que se los da él mismo con los tokens
 * del sistema, que ya cambian solos con [data-marca].
 *
 * Sin esto el diálogo salía transparente y sin relleno, encima del contenido
 * de la página y sin poder leerse. */
.cuenta-overlay {
    padding: var(--m-esp-md);
    background: color-mix(in srgb, var(--m-negro-0) 88%, transparent);
    backdrop-filter: blur(5px);
}

.cuenta-panel {
    position: relative;
    max-width: 34rem;
    padding: var(--m-esp-lg);
    border: var(--m-hilo) solid color-mix(in srgb, var(--m-acento) 55%, transparent);
    background: var(--m-negro-1);
    color: var(--m-texto);
    box-shadow:
        0 0 3rem color-mix(in srgb, var(--m-acento) 12%, transparent),
        0 1.5rem 3rem rgb(0 0 0 / 0.5);
}

/* Cada marca enseña lo suyo. Los dos iconos y los dos separadores viven en
   el markup y aquí se oculta el que no toca: la marca se cambia sin recargar
   la página, así que no puede depender de qué se pintó al cargar. */
:root[data-marca='cnc'] .cuenta-solo-medieval,
:root[data-marca='medieval'] .cuenta-solo-cnc {
    display: none;
}

/* ── La ficha, en el taller ─────────────────────────────────────────
   El mismo criterio que la caja de estado del catálogo: ni esquinas
   redondeadas ni filigrana. Un rectángulo recto, el filete de acento al
   canto —como se marca una nota en un plano— y la esquina superior
   derecha cortada en chaflán, que es lo que deja la antorcha al entrar
   en la plancha. */
:root[data-marca='cnc'] .cuenta-panel {
    border-radius: 0;
    border-inline-start: 3px solid var(--m-acento);
    clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 1.4rem, 100% 100%, 0 100%);
    /* clip-path recorta también la sombra de caja, así que el resplandor va
       por filtro: drop-shadow sí sigue la silueta ya recortada y el halo
       aparece rodeando el chaflán en vez de un rectángulo. */
    box-shadow: none;
    filter:
        drop-shadow(0 0 1.75rem color-mix(in srgb, var(--m-acento) 22%, transparent))
        drop-shadow(0 1rem 2rem rgb(0 0 0 / 0.55));
}

/* El chaflán deja el canto vivo, y sin esto quedaría sin rematar: el borde
   del panel no sigue a clip-path. Es un cuadrado del tamaño del corte con su
   diagonal pintada, que cae justo sobre él. */
:root[data-marca='cnc'] .cuenta-panel::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 1.4rem;
    height: 1.4rem;
    pointer-events: none;
    background: linear-gradient(
        to bottom left,
        transparent calc(50% - 0.5px),
        var(--m-acento) calc(50% - 0.5px) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
}

/* El resto del taller: nada redondeado, rótulos en la de palo y en
   versalitas, y el celeste donde la forja pone oro. Va acotado a
   `.cuenta-panel` porque estas mismas clases las usan los otros modales,
   que traen su propia piel y no se tocan. */
:root[data-marca='cnc'] .cuenta-pestana,
:root[data-marca='cnc'] .cuenta-panel .modal-input,
:root[data-marca='cnc'] .cuenta-panel .modal-textarea {
    border-radius: 0;
}

:root[data-marca='cnc'] .cuenta-panel .modal-titulo {
    font-family: var(--m-titular);
    font-size: 1.15rem;
    letter-spacing: 0.05em;
    color: var(--m-texto);
}

:root[data-marca='cnc'] .cuenta-panel .modal-header-icon {
    color: var(--m-acento);
    filter: drop-shadow(0 0 0.5rem color-mix(in srgb, var(--m-acento) 45%, transparent));
}

:root[data-marca='cnc'] .cuenta-panel .modal-label {
    font-family: var(--m-cuerpo);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--m-acento);
}

:root[data-marca='cnc'] .cuenta-panel .modal-input,
:root[data-marca='cnc'] .cuenta-panel .modal-textarea {
    background: var(--m-negro-0);
    border-color: var(--m-negro-4);
    font-family: var(--m-cuerpo);
}

:root[data-marca='cnc'] .cuenta-panel .modal-input:focus,
:root[data-marca='cnc'] .cuenta-panel .modal-textarea:focus {
    border-color: var(--m-acento);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-acento) 22%, transparent);
}

:root[data-marca='cnc'] .cuenta-panel .modal-btn-cerrar {
    border-radius: 0;
}

:root[data-marca='cnc'] .cuenta-panel .modal-btn-cerrar:hover {
    border-color: var(--m-acento);
    color: var(--m-acento);
}

/* El corte del taller: un hilo de acento que se apaga hacia los extremos,
   no una raya de lado a lado. */
:root[data-marca='cnc'] .cuenta-panel .modal-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--m-acento) 55%, transparent),
        transparent
    );
}

/* ── La ficha, en la forja ──────────────────────────────────────────
   La cartela de una lámina antigua: trama de buril a 135 grados sobre el
   negro, esquinas redondeadas y las cuatro escuadras que el catálogo ya
   usa en su caja de estado. Es la misma mano, no una nueva. */
:root[data-marca='medieval'] .cuenta-panel {
    border-radius: var(--m-radio-md);
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 5px,
            color-mix(in srgb, var(--m-acento) 6%, transparent) 5px 6px
        ),
        var(--m-negro-1);
}

:root[data-marca='medieval'] .cuenta-panel::before {
    content: '';
    position: absolute;
    inset: var(--m-esp-2xs);
    pointer-events: none;
    opacity: 0.5;
    background:
        linear-gradient(90deg, var(--m-acento) 0 100%) 0 0 / 1.4rem 1px no-repeat,
        linear-gradient(180deg, var(--m-acento) 0 100%) 0 0 / 1px 1.4rem no-repeat,
        linear-gradient(90deg, var(--m-acento) 0 100%) 100% 0 / 1.4rem 1px no-repeat,
        linear-gradient(180deg, var(--m-acento) 0 100%) 100% 0 / 1px 1.4rem no-repeat,
        linear-gradient(90deg, var(--m-acento) 0 100%) 0 100% / 1.4rem 1px no-repeat,
        linear-gradient(180deg, var(--m-acento) 0 100%) 0 100% / 1px 1.4rem no-repeat,
        linear-gradient(90deg, var(--m-acento) 0 100%) 100% 100% / 1.4rem 1px no-repeat,
        linear-gradient(180deg, var(--m-acento) 0 100%) 100% 100% / 1px 1.4rem no-repeat;
}

/* La orla ya trae su propio margen inferior, pensado para separar
   secciones enteras. Dentro del diálogo sobra: aquí separa una cabecera
   de un formulario, no dos capítulos. */
/* ── Proporciones del diálogo de cuenta ─────────────────────────────
   El panel heredaba el ritmo de los modales grandes: 22 px entre campo y
   campo, que en un formulario de nueve campos deja una columna de más de
   mil píxeles y obliga a desplazarse dentro del diálogo para llegar al
   botón. Aquí el ritmo baja y se declara una vez, en vez de campo por
   campo, para que las cuatro hojas respiren igual. */
.cuenta-panel .modal-campo {
    margin-bottom: 0;
}

.cuenta-panel .modal-fila {
    gap: var(--m-esp-sm);
    margin-bottom: 0;
}

.cuenta-panel form {
    display: grid;
    gap: var(--m-esp-sm);
}

/* Los campos se pulsan con el pulgar en un teléfono: 44 px es el mínimo
   que se acierta sin fallar. */
.cuenta-panel .modal-input {
    min-height: 2.75rem;
}

/* La línea que dice de qué va la hoja abierta. */
.cuenta-subtitulo {
    margin-block-start: var(--m-esp-3xs);
    max-width: 34ch;
    color: var(--m-humo-tenue);
    font-family: var(--m-cuerpo);
    font-size: var(--m-txt-sm);
    line-height: 1.5;
}

.cuenta-subtitulo:empty {
    display: none;
}

/* ── El carnet ──────────────────────────────────────────────────────
   Quién eres, en un bloque con su propio fondo y el filete de acento al
   canto. Lo separa de los campos editables, que es lo que faltaba: antes
   nombre, correo y sello flotaban sueltos encima del formulario y se leían
   como parte de él. */
.cuenta-carnet {
    display: grid;
    gap: var(--m-esp-3xs);
    margin-block-end: var(--m-esp-md);
    padding: var(--m-esp-sm) var(--m-esp-md);
    border-inline-start: 3px solid var(--m-acento);
    background: color-mix(in srgb, var(--m-acento) 7%, transparent);
}

/* Rótulo de sección: separa el carnet del formulario sin meter una raya
   más en un diálogo que ya tiene dos. */
.cuenta-seccion {
    margin-block-end: var(--m-esp-2xs);
    color: var(--m-humo-tenue);
    font-family: var(--m-cuerpo);
    font-size: var(--m-txt-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* En pantalla estrecha el panel deja de gastar dos dedos de margen en cada
   canto: ahí el sitio se necesita para el campo, no para el aire. */
@media (max-width: 30rem) {
    .cuenta-overlay {
        padding: var(--m-esp-2xs);
    }

    .cuenta-panel {
        padding: var(--m-esp-md) var(--m-esp-sm);
    }

    .cuenta-panel .modal-fila {
        grid-template-columns: 1fr;
    }
}

.cuenta-orla {
    margin-block-end: var(--m-esp-md);
    color: var(--m-acento);
}

/* En la forja no hace falta decir nada del título ni de los campos: los
   estilos base de este archivo YA son medievales —Cinzel y oro #ffb300, sin
   prefijo de piel—, y por eso este diálogo se veía medieval también en el
   taller hasta que se escribió el bloque de arriba. */

.cuenta-pestanas {
    display: flex;
    gap: var(--m-esp-xs);
    margin-bottom: var(--m-esp-sm);
}

/* Con sesión abierta, el JavaScript pone `hidden` en la tira: quien ya está
   dentro no necesita entrar ni crear otra cuenta. Hace falta declararlo
   aquí porque el display: flex de arriba gana al `hidden` del navegador, y
   sin esta regla las dos pestañas seguían viéndose. */
.cuenta-pestanas[hidden] {
    display: none;
}

.cuenta-pestana {
    appearance: none;
    flex: 1;
    min-height: 2.5rem;
    padding-inline: var(--m-esp-sm);
    border: var(--m-hilo) solid color-mix(in srgb, var(--m-acento) 35%, transparent);
    border-radius: var(--m-radio-sm);
    background: transparent;
    color: var(--m-humo);
    font-family: var(--m-cuerpo);
    font-size: var(--m-txt-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        background var(--m-rapido) var(--m-entrada),
        color var(--m-rapido) var(--m-entrada);
}

.cuenta-pestana[aria-selected="true"] {
    background: var(--m-acento);
    border-color: var(--m-acento);
    color: var(--m-negro-0);
}

/* Vacío no ocupa sitio: el aviso vive entre el formulario y las pestañas y,
   sin esto, dejaba un hueco permanente donde nunca hay nada escrito. */
.cuenta-aviso:empty {
    display: none;
}

.cuenta-aviso {
    margin: 0 0 var(--m-esp-sm);
    padding: var(--m-esp-xs) var(--m-esp-sm);
    border-radius: var(--m-radio-sm);
    font-size: var(--m-txt-sm);
    line-height: 1.45;
}

.cuenta-aviso--error {
    background: color-mix(in srgb, #ff6b6b 16%, transparent);
    border: var(--m-hilo) solid color-mix(in srgb, #ff6b6b 45%, transparent);
    color: #ffc9c9;
}

.cuenta-aviso--ok {
    background: color-mix(in srgb, #4ade80 14%, transparent);
    border: var(--m-hilo) solid color-mix(in srgb, #4ade80 40%, transparent);
    color: #bbf7d0;
}

/* Ni error ni éxito: algo que hay que saber pero que no rompió nada, como
   que la cuenta se creó pero el correo de verificación no salió. */
.cuenta-aviso--nota {
    background: color-mix(in srgb, var(--m-acento) 12%, transparent);
    border: var(--m-hilo) solid color-mix(in srgb, var(--m-acento) 38%, transparent);
    color: var(--m-texto);
}

.cuenta-pista {
    margin: calc(var(--m-esp-xs) * -1) 0 var(--m-esp-sm);
    color: var(--m-humo-tenue);
    font-size: var(--m-txt-xs);
    line-height: 1.45;
}

.cuenta-enviar {
    width: 100%;
    margin-top: var(--m-esp-xs);
}

/* El relleno de `.m-boton--solido` baja del acento al acento hondo, y en la
   marca industrial ese extremo es #0057a3: bastante oscuro para llevar tinta
   casi negra encima. Medido sobre la banda que ocupan de verdad las letras
   —centradas, altura de equis— el contraste cae a 4,17:1, por debajo del
   4,5:1 que pide la norma. En la forja no pasa: el oro deja 5,84:1.
   Aquí el degradado termina antes, a medio camino, y sube a 5,6:1 sin perder
   el efecto de metal calentándose desde abajo.
   El mismo defecto está en los demás botones sólidos de la marca industrial;
   arreglarlo en el sistema toca toda la página y no se hace de paso. */
:root[data-marca='cnc'] .cuenta-enviar.m-boton--solido {
    background: linear-gradient(
        180deg,
        var(--m-acento) 0%,
        color-mix(in srgb, var(--m-acento) 55%, var(--m-acento-hondo)) 100%
    );
}

.cuenta-nombre {
    margin: 0;
    font-family: var(--m-titular);
    font-size: var(--m-txt-lg);
    color: var(--m-texto);
}

.cuenta-correo {
    margin: 0 0 var(--m-esp-xs);
    color: var(--m-humo);
    font-size: var(--m-txt-sm);
}

.cuenta-sello {
    display: inline-block;
    margin: 0 0 var(--m-esp-sm);
    padding: 2px 10px;
    border: var(--m-hilo) solid color-mix(in srgb, var(--m-humo) 45%, transparent);
    border-radius: 999px;
    color: var(--m-humo);
    font-size: var(--m-txt-xs);
}

.cuenta-sello--ok {
    border-color: color-mix(in srgb, #4ade80 50%, transparent);
    color: #bbf7d0;
}

/* Los dos botones que no son acciones de formulario —reenviar el correo y
   cerrar sesión— se pintan como enlaces: son secundarios y competir con el
   botón de guardar sólo confundiría cuál es la acción principal. */
.cuenta-enlace {
    appearance: none;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: var(--m-acento);
    font-family: var(--m-cuerpo);
    font-size: var(--m-txt-sm);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.cuenta-enlace[hidden] {
    display: none;
}

.cuenta-enlace--salir {
    margin-top: var(--m-esp-md);
    color: var(--m-humo);
}

.cuenta-enlace--salir:hover {
    color: var(--m-texto);
}