@font-face { font-family: poppinsBold;     src: url(../coreaycle/css/poppins/Poppins-Bold.ttf); }
@font-face { font-family: poppinsLight;    src: url(../coreaycle/css/poppins/Poppins-Light.ttf); }
@font-face { font-family: poppinsMedium;   src: url(../coreaycle/css/poppins/Poppins-Medium.ttf); }
@font-face { font-family: poppinsRegular;  src: url(../coreaycle/css/poppins/Poppins-Regular.ttf); }
@font-face { font-family: poppinsSemiBold; src: url(../coreaycle/css/poppins/Poppins-SemiBold.ttf); }

/* Paleta intercec: naranja */
:root {
    --naranja:      #FF7043;
    --naranja-dark: #E64A19;
    --naranja-light:#FFF3EF;
    --texto:        #1e293b;
    --texto-suave:  #64748b;
    --borde:        #e2e8f0;
    --fondo-input:  #f8fafc;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: linear-gradient(135deg, #fff7f4 0%, #ffe8e0 100%);
    min-height: 100vh;
    font-family: poppinsLight, 'Segoe UI', system-ui, sans-serif;
    color: var(--texto);
    padding: 1.5rem 1rem 3rem;
}

/* ── Contenedor principal ── */
.page-wrap {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/* ── Cabecera ── */
.cabecera {
    max-width: 720px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, var(--naranja-dark) 0%, var(--naranja) 100%);
    border-radius: 1.1rem;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 4px 24px rgba(255,112,67,0.3);
}

#tituloBMI {
    flex: 1;
    text-align: left;
    font-family: poppinsSemiBold, sans-serif;
    font-size: 1.5rem;
    color: #fff;
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    max-width: none;
    margin: 0;
}

#subtituloBMI {
    flex: 1;
    text-align: left;
    font-family: poppinsLight, sans-serif;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.8);
    background: none;
    border-radius: 0;
    padding: 0.3rem 0 0;
    max-width: none;
    margin: 0;
}

/* AyCom logo dentro de la cabecera naranja */
.cabecera .aycom-logo { background: rgba(255,255,255,0.18); }
.cabecera .aycom-logo:hover { background: rgba(255,255,255,0.28); }
.cabecera .aycom-ay  { color: #fff; }
.cabecera .aycom-com { color: rgba(255,255,255,0.7); }
.cabecera .aycom-tag { color: rgba(255,255,255,0.7); }

/* ── Wrapper formulario centrado ── */
.form-wrap {
    max-width: 500px;
    margin: 0 auto;
}

/* ── Wrapper resultados ── */
.results-wrap {
    max-width: 720px;
    margin: 0 auto;
    overflow-x: auto;
}

/* ── Formulario ── */
form {
    width: 100%;
    display: block;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(255,112,67,0.1);
    padding: 1.75rem 2rem;
    border-top: 4px solid var(--naranja);
}

table { width: 100%; border-collapse: collapse; }
table td { padding: 0.45rem 0.5rem; vertical-align: middle; }

.btn-row { text-align: center; padding-top: 0.75rem; }

/* ── Labels ── */
.class0 { font-family: poppinsLight, sans-serif; font-size: 0.9rem; color: var(--texto-suave); }
.class2 { font-family: poppinsLight, sans-serif; font-size: 0.9rem; color: var(--texto-suave); white-space: nowrap; }

/* ── Valores resultado ── */
.class1 { font-family: poppinsLight, sans-serif; font-size: 1rem;   color: var(--texto); font-weight: 600; }
.class3 { font-family: poppinsLight, sans-serif; font-size: 0.9rem; color: var(--texto); font-weight: 600; }
.class4 { font-family: poppinsLight, sans-serif; font-size: 0.8rem; color: var(--texto-suave); }
.class5 { font-family: poppinsLight, sans-serif; font-size: 0.85rem; color: var(--texto); }

.classCE {
    font-family: poppinsLight, sans-serif;
    font-size: 0.75rem;
    color: var(--naranja);
    text-decoration: none;
}
.classCE:hover { text-decoration: underline; }

/* ── Form responsive ── */
.calc-form {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 200px 220px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #fde8e0;
    margin: 0 auto;
}

.form-row label {
    text-align: right;
}

.form-row select,
.form-row input.texto {
    flex-shrink: 0;
}

.input-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
    .form-row label { text-align: left; }
    .form-row select,
    .form-row .input-group { width: 100%; }
}

/* ── Controles ── */
select, input.texto {
    background: var(--fondo-input);
    border: 1px solid var(--borde);
    border-radius: 0.4rem;
    font-size: 0.9rem;
    height: 34px;
    padding: 0 0.6rem;
    font-family: poppinsLight, sans-serif;
    color: var(--texto);
    transition: border-color 0.2s;
    outline: none;
}
select:focus, input.texto:focus {
    border-color: var(--naranja);
    background: #fff;
}
input.texto { text-align: center; width: 3rem; }

/* ── Botón ── */
.BotonGenerico {
    background: linear-gradient(135deg, var(--naranja), var(--naranja-dark));
    border: none;
    color: #fff;
    padding: 0.5rem 1.75rem;
    font-size: 1rem;
    font-family: poppinsSemiBold, sans-serif;
    border-radius: 999px;
    margin: 0.75rem 0.5rem 0;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255,112,67,0.4);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    height: auto;
    display: inline-block;
}
.BotonGenerico:hover {
    background: linear-gradient(135deg, var(--naranja-dark), #bf360c);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255,112,67,0.5);
}

/* ── Tabla de resultados ── */
.simulacion-footer {
    max-width: 720px;
    margin: 0.75rem auto 0;
    text-align: right;
}

#simulacion {
    max-width: 720px;
    margin: 1.5rem auto 0;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(255,112,67,0.1);
    overflow: hidden;
    border-top: 4px solid var(--naranja);
}

#simulacion table { width: 100%; border-collapse: collapse; border: none; }
#simulacion table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--borde); }

#simulacion tr[bgcolor="cccccc"] td {
    background: var(--naranja) !important;
    color: #fff !important;
    font-family: poppinsSemiBold, sans-serif;
}
#simulacion tr[bgcolor="eeeeee"] td { background: var(--naranja-light) !important; }

/* ── Sugerencia rotar pantalla ── */
.rotate-hint {
    display: none;
}

@media (max-width: 420px) and (orientation: portrait) {
    .rotate-hint.rotate-hint--active {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        position: fixed;
        inset: 0;
        background: rgba(255,112,67,0.96);
        color: #fff;
        z-index: 9999;
        padding: 2rem;
        text-align: center;
        pointer-events: none;
    }
    .rotate-hint svg {
        width: 56px;
        height: 56px;
        animation: tilt 1.5s ease-in-out infinite alternate;
    }
    .rotate-hint p {
        font-family: poppinsSemiBold, sans-serif;
        font-size: 1.05rem;
    }
    @keyframes tilt {
        from { transform: rotate(-30deg); }
        to   { transform: rotate(30deg); }
    }
}

/* ── Banner Instagram ── */
.ig-banner {
    max-width: 600px;
    margin: 1.5rem auto 0;
    text-align: center;
}
.ig-link {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(220,39,67,0.3);
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.ig-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(220,39,67,0.45);
    opacity: 0.93;
}
.ig-icon {
    width: 28px;
    height: 28px;
    fill: #fff;
    flex-shrink: 0;
}
.ig-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}
.ig-seguinos {
    font-family: poppinsSemiBold, sans-serif;
    font-size: 0.9rem;
}
.ig-handle {
    font-family: poppinsLight, sans-serif;
    font-size: 0.75rem;
    opacity: 0.88;
}