/* ==========================================================================
   H2 ARCHTS - ESTILOS CSS GENERALES Y NEOTÁCTILES
   ========================================================================== */

/* 1. FUENTES LOCALES */

/* Archia Font Family */
@font-face {
    font-family: 'Archia';
    src: url('fonts/ARCHIA/Archia-THIN.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archia';
    src: url('fonts/ARCHIA/Archia-LIGHT.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archia';
    src: url('fonts/ARCHIA/Archia-REGULAR.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archia';
    src: url('fonts/ARCHIA/Archia-MEDIUM.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archia';
    src: url('fonts/ARCHIA/Archia-SEMIBOLD.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archia';
    src: url('fonts/ARCHIA/Archia-BOLD.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Inter Font Family */
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter/Inter_28pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter/Inter_28pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter/Inter_28pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter/Inter_28pt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter/Inter_28pt-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter/Inter_28pt-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Reset de Tipografía Global */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, .font-archia-title {
    font-family: 'Archia', "Hanken Grotesk", sans-serif;
}

/* 2. ESTILOS NEOTÁCTILES PREMIUM */

/* Botón Primario (Terracota Neotáctil) */
.btn-neotactil {
    background: linear-gradient(135deg, #974b3e 0%, #793429 100%);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    box-shadow: 
        3px 3px 6px rgba(121, 52, 41, 0.28), 
        -3px -3px 6px rgba(255, 255, 255, 0.85),
        inset 1px 1px 2px rgba(255, 255, 255, 0.35);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}
.btn-neotactil:hover {
    transform: translateY(-1.5px);
    box-shadow: 
        4px 4px 10px rgba(121, 52, 41, 0.35), 
        -4px -4px 10px rgba(255, 255, 255, 0.95),
        inset 1px 1px 2px rgba(255, 255, 255, 0.45);
    filter: brightness(1.08);
}
.btn-neotactil:active {
    transform: translateY(1px);
    box-shadow: 
        inset 3px 3px 6px rgba(0, 0, 0, 0.4), 
        inset -3px -3px 6px rgba(255, 255, 255, 0.1);
}

/* Botón Secundario (Claro / Bone Neotáctil) */
.btn-neotactil-secondary {
    background: #f9f9f8;
    color: #1a1c1c !important;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    box-shadow: 
        3px 3px 6px rgba(186, 180, 175, 0.45), 
        -3px -3px 6px rgba(255, 255, 255, 0.95),
        inset 1px 1px 1px rgba(255, 255, 255, 0.95);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.btn-neotactil-secondary:hover {
    transform: translateY(-1.5px);
    box-shadow: 
        4px 4px 10px rgba(186, 180, 175, 0.55), 
        -4px -4px 10px rgba(255, 255, 255, 1),
        inset 1px 1px 1px rgba(255, 255, 255, 0.95);
    background: #ffffff;
    color: #793429 !important;
}
.btn-neotactil-secondary:active {
    transform: translateY(1px);
    box-shadow: 
        inset 3px 3px 6px rgba(186, 180, 175, 0.5), 
        inset -3px -3px 6px rgba(255, 255, 255, 0.85);
    background: #eeeeed;
}

/* Inputs Neotáctiles (Con relieve interno hundido) */
.input-neotactil {
    background: #f9f9f8;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    box-shadow: 
        inset 2px 2px 4px rgba(186, 180, 175, 0.4), 
        inset -2px -2px 4px rgba(255, 255, 255, 0.9);
    transition: all 0.2s ease-in-out;
    color: #1a1c1c;
}
.input-neotactil:focus {
    outline: none;
    border-color: #793429;
    box-shadow: 
        0 0 0 3px rgba(121, 52, 41, 0.15),
        inset 1px 1px 3px rgba(186, 180, 175, 0.3);
    background: #ffffff;
}

/* 3. CORTES GEOMÉTRICOS & EFECTOS DE CRISTAL (Preservados del Concepto) */

.clip-45 {
    clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px));
}
.clip-45-tr {
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.clip-chamfer-br { 
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-size, 20px)), calc(100% - var(--chamfer-size, 20px)) 100%, 0 100%); 
}
.clip-chamfer-tr { 
    clip-path: polygon(0 0, calc(100% - var(--chamfer-size, 20px)) 0, 100% var(--chamfer-size, 20px), 100% 100%, 0 100%); 
}

.neomorphic-sunk {
    box-shadow: inset 2px 2px 5px rgba(209, 207, 205, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.8);
}
.sunk-panel {
    box-shadow: inset 3px 3px 6px rgba(186, 180, 175, 0.4), 
                inset -3px -3px 6px rgba(255, 255, 255, 0.9);
}

.glass-float {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 30px 60px -15px rgba(26, 28, 28, 0.05);
}
.glass-panel {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 0.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 50px rgba(176,173,169,0.15);
}
.glass-overlay {
    background: rgba(249, 249, 248, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.h2-gradient {
    background: linear-gradient(135deg, #974b3e 0%, #793429 100%);
}

/* 4. MODAL DE CONSULTA PERSONALIZADO */
.modal-backdrop {
    background-color: rgba(26, 28, 28, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 0.3s ease-out;
}
.modal-content-neotactil {
    background: #f9f9f8;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    box-shadow: 
        10px 10px 30px rgba(186, 180, 175, 0.3), 
        -10px -10px 30px rgba(255, 255, 255, 0.9);
}