/* ==================================================
   POLISH — capa de mejoras visuales (octubre 2026)
   Se carga DESPUÉS de style.css. No reemplaza nada del
   diseño original: corrige y afina. Si algo no te gusta,
   basta con quitar esta hoja del <head> y todo vuelve
   a como estaba.
================================================== */

/* ---------- 1. Tipografía propia (Inter, licencia OFL) ---------- */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Bold.woff") format("woff");
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter Display";
    src: url("../fonts/InterDisplay-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter Display";
    src: url("../fonts/InterDisplay-ExtraBold.woff") format("woff");
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- 2. Tokens ---------- */

:root {
    /* Naranja de marca para TEXTO sobre fondo claro (el naranja
       original #ff7a18 no se lee bien en letras chicas). */
    --color-orange-ink: #c24e08;
    --color-ink: #141414;

    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    /* Curvas de movimiento: salida rápida, llegada suave */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

    --focus-ring: 0 0 0 3px #ffffff, 0 0 0 5px var(--color-orange-ink);
}

/* ---------- 3. Base ---------- */

html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-body);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    text-wrap: balance;
}

p,
li {
    text-wrap: pretty;
}

::selection {
    background: rgba(255, 122, 24, 0.28);
    color: inherit;
}

/* Foco visible y consistente para quien navega con teclado */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 10px;
}

.btn:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Teléfonos y correos ahora son enlaces: se ven igual que antes */
a[href^="tel:"],
a[href^="mailto:"] {
    color: inherit;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

@media (hover: hover) and (pointer: fine) {
    a[href^="tel:"]:hover,
    a[href^="mailto:"]:hover {
        text-decoration: underline;
    }
}

.footer-contact a[href^="tel:"],
.footer-contact a[href^="mailto:"] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------- 4. Títulos ---------- */

.hero-content h1,
.section-heading h2,
.process-heading h2,
.nosotros-hero-content h1,
.product-page-hero-content h1,
.contact-page-heading h1,
.cta-content h2,
.contact-final-content h2 {
    font-weight: 800;
    letter-spacing: -0.022em;
}

.specialty-content h3,
.location-info-card h3,
.philosophy-card h3,
.contact-form-heading h2,
.contact-page-info h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.section-heading p,
.hero-content p {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
}

/* Colores de texto naranja con contraste suficiente sobre blanco */
.nav-list a.active,
.nav-list a:hover,
.dropdown-btn:hover {
    color: var(--color-orange-ink);
}

/* ---------- 5. Botones ---------- */

.btn {
    transition:
        transform 160ms var(--ease-out),
        background-color 200ms ease,
        color 200ms ease,
        box-shadow 200ms ease;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* El texto blanco sobre naranja no se leía bien (contraste 2.6:1).
   Mantenemos el naranja de marca y usamos texto oscuro (7:1). */
.btn-primary {
    color: var(--color-ink);
}

.btn-primary:hover {
    color: var(--color-ink);
}

.btn-dark:hover {
    color: var(--color-ink);
}

/* Respuesta inmediata al presionar, en celular y en computador */
.btn:active {
    transform: scale(0.97);
    transition-duration: 100ms;
}

/* El botón del formulario queda centrado y con su flecha al final */
.contact-page-form .btn {
    justify-content: center;
}

/* ---------- 6. Portada (video) ---------- */

/* Mientras el video carga (o si el visitante pidió menos
   movimiento) se ve la foto de portada en vez de un fondo negro. */
.hero {
    background: #111111 url("../img/hero-poster.webp") center / cover no-repeat;
}

@media (max-width: 650px) {
    .hero {
        background-image: url("../img/hero-poster-mobile.webp");
        min-height: min(620px, 92svh);
    }
}

/* Entrada de la portada: el único movimiento "de autor" al abrir la página */
@media (prefers-reduced-motion: no-preference) {
    .hero-content > * {
        animation: hero-rise 900ms var(--ease-out) both;
    }

    .hero-content > :nth-child(2) {
        animation-delay: 90ms;
    }

    .hero-content > :nth-child(3) {
        animation-delay: 180ms;
    }
}

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ---------- 7. Tarjetas de materiales (toda la tarjeta es clickeable) ---------- */

.specialty-card {
    position: relative;
    display: flex;
    flex-direction: column;
    transition:
        transform 260ms var(--ease-out),
        box-shadow 260ms var(--ease-out);
}

.specialty-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.specialty-title-link {
    color: inherit;
}

.specialty-title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.specialty-card:focus-within {
    box-shadow: var(--focus-ring), var(--shadow);
}

.specialty-title-link:focus-visible {
    box-shadow: none;
}

.specialty-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    color: var(--color-orange-ink);
    font-size: 14px;
    font-weight: 700;
}

.specialty-more i {
    font-size: 12px;
    transition: transform 220ms var(--ease-out);
}

.specialty-card img {
    transition: transform 600ms var(--ease-out);
}

.specialty-card > a:first-child {
    display: block;
    overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .specialty-card:hover img {
        transform: scale(1.04);
    }

    .specialty-card:hover .specialty-more i {
        transform: translateX(4px);
    }
}

@media (max-width: 980px) {
    .specialty-more {
        padding-top: 12px;
        font-size: 13px;
    }
}

/* ---------- 8. Galería "Así hacemos tu cubierta" ---------- */

/* Las fotos aparecen "subiendo" como una plancha que se levanta,
   en vez del mismo deslizamiento que el resto de la página.
   (Se recorta la foto, no el marco, para que el navegador detecte
   cuándo la tarjeta entra en pantalla.) */
.process-photo {
    background: rgba(10, 11, 13, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
    .motion-ready .process-photo[data-reveal] {
        opacity: 1;
        transform: none;
        transition:
            transform 350ms var(--ease-out),
            border-color 350ms ease,
            box-shadow 350ms ease;
    }

    .motion-ready .process-photo[data-reveal] img {
        clip-path: inset(100% 0 0 0);
        transform: scale(1.12);
        transition:
            clip-path 1000ms var(--ease-in-out),
            transform 1400ms var(--ease-out);
        transition-delay: var(--reveal-delay, 0ms);
    }

    .motion-ready .process-photo[data-reveal].is-visible img {
        clip-path: inset(0 0 0 0);
        transform: none;
    }
}

@media (hover: hover) and (pointer: fine) {
    .motion-ready .process-photo[data-reveal].is-visible:hover img {
        transform: scale(1.05);
        transition-duration: 1000ms, 700ms;
        transition-delay: 0ms;
    }
}

/* El resto de las apariciones: más cortas y discretas */
.motion-ready [data-reveal]:not(.process-photo) {
    transform: translateY(12px);
    transition:
        opacity 550ms var(--ease-out),
        transform 550ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal]:not(.process-photo).is-visible {
    transform: none;
}

/* ---------- 9. Contacto ---------- */

/* En iPhone, un campo con letra menor a 16px hace zoom en la página
   al tocarlo y no vuelve. Con 16px eso ya no pasa. */
@media (pointer: coarse) {
    input,
    select,
    textarea,
    .contact-page-form .contact-form-grid input,
    .contact-page-form .contact-form-grid select,
    .contact-page-form .contact-form-grid textarea {
        font-size: 16px;
    }
}

/* Franja naranja final de Contacto: texto oscuro para que se lea */
.contact-final-cta {
    color: var(--color-ink);
}

.contact-final-content p {
    color: rgba(20, 20, 20, 0.78);
}

.contact-page-item {
    transition:
        transform 220ms var(--ease-out),
        border-color 220ms ease,
        background-color 220ms ease;
}

/* ---------- 10. Celulares: sin "hover pegado" al tocar ---------- */

/* En pantallas táctiles el :hover se queda activado después del
   toque. Anulamos los saltos y agrandados en esos equipos; el
   botón igual responde al presionarlo (punto 5). */
@media (hover: none) {
    .btn-primary:hover,
    .btn-light:hover,
    .btn-dark:hover,
    .specialty-card:hover,
    .catalog-card:hover,
    .header-socials a:hover,
    .footer-social a:hover,
    .whatsapp-btn:hover,
    .contact-page-item:hover,
    .quote-btn:hover {
        transform: none;
    }

    .header-socials a:hover i,
    .footer-social a:hover i {
        animation: none;
    }
}

a,
button,
[role="button"] {
    touch-action: manipulation;
}

.whatsapp-btn {
    transition:
        transform 200ms var(--ease-out),
        background-color 200ms ease;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

.whatsapp-btn:active {
    transform: scale(0.94);
}

@media (max-width: 650px) {
    .whatsapp-btn {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- 11. Menos movimiento si el visitante lo pidió ---------- */

@media (prefers-reduced-motion: reduce) {
    .hero-content > * {
        animation: none;
    }

    .btn:active,
    .whatsapp-btn:active {
        transform: none;
    }
}

/* El correo es largo: en celular ocupa todo el ancho para no cortarse */
@media (max-width: 980px) {
    .footer-contact li:has(a[href^="mailto:"]) {
        grid-column: 1 / -1;
    }

    .footer-contact a[href^="mailto:"] {
        overflow-wrap: normal;
    }
}

/* Si alguien llega con el teclado a un bloque que aún no aparece,
   se muestra de inmediato. */
.motion-ready [data-reveal]:focus-within {
    opacity: 1;
    transform: none;
}