/* Cremería HM — hoja única del sitio (inicio, páginas de servicio, /ia y 404).
   Brandbook 2026: azul domina (45%), amarillo (25%), rojo (20%), blanco (10%).
   Brillante y de barrio; nada de minimalismo "caro". */

:root {
    --azul: #203E93;
    --azul-oscuro: #182F70;
    --azul-noche: #11225A;
    --amarillo: #ECDD53;
    --rojo: #AB271A;
    --rojo-oscuro: #8E1F14;
    --blanco: #F1F2F2;
    --papel: #FFFFFF;
    --tinta: #14214D;
    --tinta-suave: #44507A;
    --linea: #D4D8E6;
    --borde-campo: #7D87AD;   /* 3.6:1 sobre blanco (componente de UI) */
    --amarillo-claro: #F4E77A;
    --whatsapp: #25D366;
    --ok-fondo: #E3F2E1;
    --ok-texto: #1E5B1A;
    --err-fondo: #FBE4E1;

    --titulo: 'Kepler Std', 'Playfair Display', Georgia, serif;
    --texto: 'Bahnschrift', 'Barlow', system-ui, sans-serif;
    --letrero: 'Bahnschrift SemiBold SemiConden', 'Barlow Semi Condensed', 'Barlow', sans-serif;

    --ancho: 1120px;
    --seccion: clamp(3.5rem, 8vw, 6rem);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
    font-family: var(--texto);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--blanco);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Títulos en itálica: Kepler del brandbook es semicondensada itálica */
h1, h2, h3 {
    font-family: var(--titulo);
    font-style: italic;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
h2 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 1rem; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
:where(.cab, .portada, .productos, .encabezado-pagina, .llamado, .pie, .error-404, .datos-contacto) :focus-visible { outline-color: var(--amarillo); }

.skip-link {
    position: absolute; left: -999px; top: 0;
    background: var(--amarillo); color: var(--azul-oscuro);
    padding: 0.75rem 1rem; font-weight: 700; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.marco { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.seccion { padding: var(--seccion) 0; }

/* ===== Piezas de señalética ===== */

/* Letrero: etiqueta en mayúsculas como la señalética de tienda */
.letrero {
    display: inline-block;
    font-family: var(--letrero);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35em 0.75em 0.3em;
    background: var(--amarillo);
    color: var(--azul-oscuro);
}
.letrero--rojo { background: var(--rojo); color: #fff; }
.letrero--blanco { background: #fff; color: var(--azul); }

/* Franja diagonal azul/amarillo de la señalética interna */
.franja {
    height: 10px;
    background: repeating-linear-gradient(135deg, var(--amarillo) 0 14px, var(--azul-noche) 14px 28px);
}

.cenefa {
    height: clamp(44px, 5vw, 60px);
    background: url('imagenes/talavera.png') repeat-x center / auto 100%;
}

/* ===== Botones ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    border-radius: 6px;
    border: 2px solid transparent;
    font-family: var(--texto);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--rojo); color: #fff; }
.btn-primary:hover { background: var(--rojo-oscuro); }
.btn-secondary { background: transparent; color: inherit; border-color: currentColor; }
.btn-amarillo { background: var(--amarillo); color: var(--azul-oscuro); }
.btn-amarillo:hover { background: var(--amarillo-claro); }
.btn svg { width: 20px; height: 20px; fill: currentColor; }

/* ===== Encabezado ===== */
.cab {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--azul);
    color: #fff;
}
.nav-inner {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 20px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
}
.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    font-family: var(--titulo);
    font-style: italic;
    font-weight: 700;
    font-size: 1.3rem;
    white-space: nowrap;
}
.nav-logo img { width: 40px; height: auto; }
.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.nav-menu a {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
}
.nav-menu a:hover { color: var(--amarillo); }
.nav-menu .nav-cta {
    display: inline-block;
    background: var(--amarillo);
    color: var(--azul-oscuro);
    padding: 0.5rem 0.95rem;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.nav-menu .nav-cta:hover { color: var(--azul-oscuro); background: var(--amarillo-claro); }
.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer;
    color: #fff;
    position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    position: absolute; left: 11px;
    width: 22px; height: 2.5px;
    background: currentColor;
    transition: transform 0.2s ease;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before, .nav-toggle span::after { content: ''; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ===== Portada ===== */
.portada {
    background: var(--azul);
    color: #fff;
    padding: clamp(2.75rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.portada .marco {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
    gap: 2.5rem;
}
.portada h1 {
    font-size: clamp(2.6rem, 6.4vw, 4.6rem);
    margin: 1.1rem 0 1.25rem;
    max-width: 13ch;
}
.portada p {
    font-size: 1.15rem;
    max-width: 38ch;
    color: rgba(255, 255, 255, 0.9);
}
.portada-botones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.portada-logo { justify-self: center; width: min(400px, 100%); height: auto; }

/* ===== Cifras ===== */
.cifras { background: var(--rojo); color: #fff; padding: 2.25rem 0; }
.cifras ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.cifra-num {
    display: block;
    font-family: var(--titulo);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2.3rem, 5vw, 3.4rem);
    font-variant-numeric: lining-nums;
    line-height: 1;
}
.cifra-label {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--letrero);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ===== Valores ===== */
.valores { background: var(--amarillo); }
.valores h2 { color: var(--azul); max-width: 20ch; }
.valores-lista {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem 2rem;
    margin-top: 2.5rem;
}
.valores-lista li { border-top: 3px solid var(--azul); padding-top: 1rem; }
.valores-lista h3 { font-size: 1.45rem; color: var(--azul); margin-bottom: 0.4rem; }
.valores-lista p { color: var(--tinta); }

/* ===== Productos ===== */
.productos { background: var(--azul); color: #fff; }
.productos .intro { color: rgba(255, 255, 255, 0.88); font-size: 1.1rem; }
.pizarras {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 1.25rem;
    margin-top: 2.25rem;
}
.pizarra {
    background: var(--azul-oscuro);
    border-radius: 8px;
    padding: 1.5rem 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
}
.pizarra ul { list-style: none; margin: 1.1rem 0 1.25rem; flex: 1; }
.pizarra li {
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.22);
}
.pizarra li:last-child { border-bottom: 0; }
.pizarra a {
    color: var(--amarillo);
    font-weight: 700;
    text-underline-offset: 4px;
}

/* ===== Portal de clientes ===== */
.portal-clientes { background: var(--rojo); color: #fff; padding: clamp(2.75rem, 6vw, 4rem) 0; }
.portal-clientes .marco {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
}
.portal-clientes h2 { margin-bottom: 0.5rem; max-width: 22ch; }
.portal-clientes p { color: rgba(255, 255, 255, 0.9); }
.portal-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.portal-clientes .btn-primary { background: var(--amarillo); color: var(--azul-oscuro); }
.portal-clientes .btn-primary:hover { background: var(--amarillo-claro); }
.portal-clientes .btn-secondary { color: #fff; }
.portal-clientes .btn:focus-visible { outline-color: #fff; }

/* ===== Preguntas frecuentes ===== */
.faq { background: var(--papel); }
.faq h2 { color: var(--azul); }
.faq-item {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0.5rem 2.5rem;
    padding: 1.4rem 0;
    border-top: 1px solid var(--linea);
}
.faq-item h3 { font-size: 1.3rem; color: var(--azul); }
.faq-item p { color: var(--tinta-suave); }

/* ===== Contacto ===== */
.contacto h2 { color: var(--azul); }
.contacto .horario { color: var(--tinta-suave); font-size: 1.1rem; }
.contacto-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1.5rem;
    margin-top: 2.25rem;
    align-items: start;
}
.form-card {
    background: var(--papel);
    border-radius: 8px;
    padding: clamp(1.4rem, 3vw, 2rem);
    border-top: 6px solid var(--azul);
}
.datos-contacto {
    background: var(--azul);
    color: #fff;
    border-radius: 8px;
    padding: clamp(1.4rem, 3vw, 2rem);
}
.datos-contacto dl { display: grid; gap: 1.1rem; }
.datos-contacto dt {
    font-family: var(--letrero);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amarillo);
}
.datos-contacto dd { font-size: 1.1rem; }
.datos-contacto a { text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.mapa { margin-top: 1.5rem; }
.mapa h3 { font-size: 1.5rem; color: var(--azul); margin-bottom: 0.75rem; }
.mapa iframe { width: 100%; height: 360px; border: 0; border-radius: 8px; display: block; }

/* ===== Formularios ===== */
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.campo input, .campo select, .campo textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--tinta);
    background: #fff;
    border: 2px solid var(--borde-campo);
    border-radius: 6px;
    padding: 0.7rem 0.8rem;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--azul);
    outline: 3px solid rgba(32, 62, 147, 0.25);
    outline-offset: 0;
}
.form-submit { width: 100%; margin-top: 0.5rem; }
.form-submit[disabled] { opacity: 0.7; cursor: wait; transform: none; }
.form-msg { margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 6px; font-weight: 600; }
.form-msg.ok { background: var(--ok-fondo); color: var(--ok-texto); }
.form-msg.err { background: var(--err-fondo); color: var(--rojo-oscuro); }

/* ===== Empleo ===== */
.empleo { background: var(--amarillo); color: var(--azul-oscuro); }
.empleo h2 { color: var(--azul); }
.empleo-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 2.5rem;
    align-items: start;
}
.empleo .intro { font-size: 1.15rem; max-width: 36ch; }
.puestos { list-style: none; margin-top: 1.75rem; display: grid; gap: 1rem; }
.puestos li { display: grid; gap: 0.3rem; justify-items: start; }
.empleo .form-card { border-top-color: var(--rojo); }

/* ===== Pie ===== */
.pie { background: var(--azul-noche); color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; }
.pie-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem;
    padding: 3rem 20px 2rem;
}
.pie-marca img { width: 160px; height: auto; margin-bottom: 1rem; }
.pie-marca .lema {
    font-family: var(--titulo);
    font-style: italic;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 0.4rem;
}
.pie h4 {
    font-family: var(--letrero);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amarillo);
    margin-bottom: 0.8rem;
}
.pie ul { list-style: none; display: grid; gap: 0.1rem; }
.pie li a { display: inline-block; padding: 0.35rem 0; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--amarillo); text-decoration: underline; }
.pie-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1.25rem 20px 1.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ===== WhatsApp flotante ===== */
.wa-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
.wa-btn {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 0;
    background: var(--whatsapp);
    color: #fff;
    cursor: pointer;
    display: grid; place-items: center;
    box-shadow: 0 6px 18px rgba(17, 34, 90, 0.35);
}
.wa-btn svg { width: 30px; height: 30px; fill: currentColor; }
.wa-opts {
    position: absolute; right: 0; bottom: 72px;
    display: none;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(17, 34, 90, 0.25);
    overflow: hidden;
    min-width: 230px;
}
.wa-wrap.open .wa-opts { display: block; }
.wa-opt {
    display: block;
    padding: 0.85rem 1rem;
    text-decoration: none;
}
.wa-opt + .wa-opt { border-top: 1px solid var(--linea); }
.wa-opt strong { display: block; color: var(--azul); }
.wa-opt small { color: var(--tinta-suave); }
.wa-opt:hover { background: var(--blanco); }

/* ===== Páginas interiores (servicios, /ia) ===== */
.encabezado-pagina { background: var(--azul); color: #fff; padding: clamp(2rem, 5vw, 3.5rem) 0; }
.encabezado-pagina h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin: 0.75rem 0 1rem; max-width: 18ch; }
.encabezado-pagina .respuesta { font-size: 1.15rem; max-width: 60ch; color: rgba(255, 255, 255, 0.92); }
.migas { font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }
.migas a { color: #fff; }
.contenido { background: var(--papel); }
.encabezado-pagina .marco, .contenido .marco, .llamado .marco { max-width: 820px; }
.contenido h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
    color: var(--azul);
    margin: 2.25rem 0 0.75rem;
    width: fit-content;
    background: linear-gradient(transparent 62%, var(--amarillo) 62%);
}
.contenido h2:first-child { margin-top: 0; }
.contenido p { color: var(--tinta-suave); margin-bottom: 1rem; }
.contenido ul { margin: 0 0 1rem 1.2rem; color: var(--tinta-suave); }
.contenido li { margin-bottom: 0.35rem; }
.contenido .faq-item { grid-template-columns: 1fr; }
.datos {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.6rem 1.5rem;
    border-top: 3px solid var(--azul);
    padding-top: 1rem;
}
.datos dt { font-weight: 700; color: var(--tinta); }
.datos dd { color: var(--tinta-suave); }
.otros { margin-top: 2rem; color: var(--tinta-suave); }
.otros a { color: var(--azul); font-weight: 600; }
.llamado { background: var(--rojo); color: #fff; padding: 2.5rem 0; }
.llamado .marco { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.llamado h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0; }

/* ===== 404 ===== */
.error-404 {
    min-height: 100svh;
    background: var(--azul);
    color: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem 20px;
}
.error-404 .numero {
    font-family: var(--titulo);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(7rem, 26vw, 13rem);
    font-variant-numeric: lining-nums;
    line-height: 1;
    margin-bottom: 0.75rem;
    color: var(--amarillo);
}
.error-404 h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 1rem auto 2rem; max-width: 22ch; }
.error-404 .portada-botones { justify-content: center; }
.error-404 img { width: 64px; margin: 0 auto 1.5rem; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
    .valores-lista { grid-template-columns: repeat(2, 1fr); }
    .pizarras { grid-template-columns: 1fr; }
    .contacto-grid, .empleo-grid { grid-template-columns: 1fr; }
    .pie-grid { grid-template-columns: 1fr 1fr; }
    .faq-item { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .nav-toggle { display: block; }
    .nav-menu {
        display: none;
        position: absolute;
        top: 64px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--azul-oscuro);
        padding: 0.5rem 20px 1.25rem;
        border-bottom: 4px solid var(--amarillo);
    }
    .nav-menu.active { display: flex; }
    .nav-menu--solo { display: flex; position: static; padding: 0; background: none; border: 0; }
    .nav-menu li a { display: block; padding: 0.8rem 0; }
    .nav-menu .nav-cta { margin-top: 0.75rem; text-align: center; padding: 0.8rem 1rem; }
    .portada .marco { grid-template-columns: 1fr; gap: 1.5rem; }
    .portada-logo { display: none; } /* en móvil el encabezado ya trae el isotipo */
    .cifras ul { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .valores-lista { grid-template-columns: 1fr; }
    .pie-grid { grid-template-columns: 1fr; }
    .portada-botones .btn { flex: 1 1 100%; }
    .datos { grid-template-columns: 1fr; gap: 0.15rem; }
    .datos dd { margin-bottom: 0.6rem; }
    .wa-wrap { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .nav-toggle span::before, .nav-toggle span::after { transition: none; }
    .btn:hover { transform: none; }
}