/* Reset scoped: solo dentro de bloques FABRICA, nunca afecta al tema anfitrión.
   :where() da especificidad cero al elemento, para que las utilidades
   de Tailwind (h-14, px-4, etc.) siempre puedan sobreescribir el reset. */
.fabrica-block,
.fabrica-block :where(*),
.fabrica-block :where(*)::before,
.fabrica-block :where(*)::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

.fabrica-block :where(h1, h2, h3, p, ul) {
    margin: 0;
    padding: 0;
}

.fabrica-block :where(ul) {
    list-style: none;
}

.fabrica-block :where(a) {
    text-decoration: none;
}

.fabrica-block :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
}

/* El reset de arriba usa :where() (especificidad 0) para no pisar las
   utilidades de Tailwind, pero eso tambien hace que CUALQUIER regla del tema
   le gane. Esta si es innegociable: ninguna imagen puede desbordar su
   contenedor y romper el layout en movil. Va antes que las reglas especificas
   de cada bloque, que por ser mas especificas siguen mandando. */
.fabrica-block img {
    max-width: 100% !important;
}

/* Muchos temas estilizan el elemento <section> directamente (margenes
   grandes, alturas minimas de pantalla completa). Nuestros bloques traen su
   propio espaciado, asi que se neutraliza lo que venga del tema. NO se toca
   min-height aqui: el hero lo usa de forma legitima con `min-h-[420px]`. */
.fabrica-block > section,
.fabrica-block section {
    margin: 0 !important;
    float: none !important;
}

/* ---------------------------------------------------------------------
   Elementor: evitar el hueco vertical debajo de nuestros widgets.
   Elementor 3.6+ envuelve cada widget en un contenedor flex (.e-con). Si ese
   contenedor trae una altura minima (plantillas con "ajustar a pantalla"),
   el espacio sobrante queda vacio debajo del bloque y se ve como una banda
   del color del contenedor. Nuestros bloques ya traen su propio alto.
   --------------------------------------------------------------------- */

/* 0) LA CAUSA REAL (medida con getComputedStyle en un sitio real):
      el <section> del bloque media 900px y el WIDGET que lo envuelve 1669px.
      Elementor coloca el widget dentro de un contenedor flex y, al tener el
      widget su alto en `auto`, `align-items: stretch` lo estira hasta la
      altura del contenedor. Los 769px sobrantes se ven como una banda vacia.

      Se usa `height: fit-content` en vez de `align-self: flex-start` a
      proposito: align-self actua sobre el eje transversal, asi que en un
      contenedor en COLUMNA (el modo por defecto de Elementor) encogeria el
      ANCHO del bloque. Fijar el alto evita el estirado en cualquier
      direccion, porque `stretch` solo se aplica cuando el alto es `auto`. */
.elementor-widget[class*="elementor-widget-fabrica_"] {
    /* Se neutralizan TODOS los mecanismos que pueden dar altura a un item de
       flex/grid, porque medido en sitio real el widget quedaba en 1669px con
       un contenido de 900px y sin relleno: no bastaba con `height`.
       - height/block-size/min/max: dimensionado directo
       - flex: evita crecer o encogerse respecto al contenedor
       - align-self / justify-self: evita el estirado en ambos ejes
       - aspect-ratio: evita que el alto se derive del ancho
       Nuestros bloques definen su propio alto dentro del <section>, un nivel
       mas adentro, asi que nada de esto les afecta. */
    height: auto !important;
    block-size: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;
    align-self: auto !important;
    justify-self: auto !important;
}

/* 1) Nada dentro del widget debe imponer alto. No afecta al alto propio de
      cada bloque, que vive en el <section> (p. ej. el hero con min-h-[420px]).
      Los MARGENES importan aqui: al ser el widget un item de flex, establece
      un contexto de formato propio, asi que los margenes de sus hijos NO se
      colapsan hacia afuera y se suman a su altura. */
.elementor-widget[class*="elementor-widget-fabrica_"] > .elementor-widget-container,
.elementor-widget[class*="elementor-widget-fabrica_"] .fabrica-block {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
}

/* 1b) Pseudo-elementos decorativos que algunos temas anaden a los widgets:
       no aportan nada a nuestros bloques y pueden inyectar altura. */
.elementor-widget[class*="elementor-widget-fabrica_"]::before,
.elementor-widget[class*="elementor-widget-fabrica_"]::after,
.elementor-widget[class*="elementor-widget-fabrica_"] > .elementor-widget-container::before,
.elementor-widget[class*="elementor-widget-fabrica_"] > .elementor-widget-container::after {
    content: none !important;
    display: none !important;
}

/* 2) Un contenedor flex que SOLO envuelve un bloque nuestro no debe imponerle
      altura. El :only-child lo mantiene acotado: si el cliente pone mas
      elementos en ese contenedor, su diseno se respeta tal cual. */
.e-con:has(> .elementor-widget[class*="elementor-widget-fabrica_"]:only-child),
.elementor-container:has(> .elementor-column:only-child .elementor-widget[class*="elementor-widget-fabrica_"]) {
    min-height: 0 !important;
}

.fabrica-block :where(button) {
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    padding: 0;
}

.fabrica-block {
    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
}

/* Menú móvil: oculto hasta que el JS agrega .fab-open al header */
.fabrica-header .fab-mobile {
    display: none;
}

.fabrica-header.fab-open .fab-mobile {
    display: block;
}

/* Enlaces del menú móvil (variante subrayado): color + barra animada */
.fabrica-block .fab-mlink {
    color: #374151;
    transition: color 0.2s ease;
}

.fabrica-block .fab-mlink:hover,
.fabrica-block .fab-mlink.is-active {
    color: var(--accent);
}

.fabrica-block .fab-bar {
    display: block;
    height: 2.5px;
    margin-top: 4px;
    border-radius: 9999px;
    background-color: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-out;
}

.fabrica-block .fab-mlink:hover .fab-bar,
.fabrica-block .fab-mlink.is-active .fab-bar {
    transform: scaleX(1);
}

/* Enlaces del menú móvil (variante pro): píldora al hover */
.fabrica-block .fab-pill-hover:hover {
    background-color: var(--accent);
    color: #ffffff;
    padding-left: 1rem;
}

/* Fallback por viewport (refuerzo de las container queries):
   en pantallas anchas jamás se muestra la hamburguesa ni el menú móvil,
   y el menú de escritorio siempre aparece. */
@media (min-width: 1024px) {
    .fabrica-header [data-fabrica-toggle] {
        display: none !important;
    }

    .fabrica-header .fab-mobile {
        display: none !important;
    }

    .fabrica-header nav.hidden {
        display: flex;
    }
}

/* ---------------------------------------------------------------------
   Formulario de contacto. Los campos de formulario son, junto a los
   <button>, lo que mas agresivamente estilizan los temas de WordPress, asi
   que su apariencia se fija aqui con especificidad alta y !important en vez
   de confiarla a utilidades de Tailwind.
   --------------------------------------------------------------------- */
.fab-ct__input,
.fabrica-block .fab-ct__input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 9999px !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #111827 !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fab-ct__input:focus,
.fabrica-block .fab-ct__input:focus {
    border-color: #9ca3af !important;
    box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2) !important;
}

textarea.fab-ct__textarea,
.fabrica-block textarea.fab-ct__textarea {
    border-radius: 1rem !important;
    resize: vertical !important;
    min-height: 8rem !important;
}

/* Etiqueta flotante: descansa dentro del campo y sube a montarse sobre el
   borde al enfocar o cuando hay texto. Todo con CSS via :placeholder-shown,
   por eso los campos llevan placeholder=" " (un espacio): sin el, el selector
   nunca dejaria de coincidir y la etiqueta no subiria nunca. */
.fabrica-block .fab-ct__field {
    position: relative !important;
    display: block !important;
}

.fabrica-block .fab-ct__flabel {
    position: absolute !important;
    left: 0.9rem !important;
    top: 50% !important;
    transform: translateY(-50%);
    transform-origin: left center;
    max-width: calc(100% - 2rem);
    margin: 0 !important;
    padding: 0 0.35rem !important;
    background: #ffffff !important;
    color: #9ca3af !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transition: top 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.fabrica-block .fab-ct__input:focus + .fab-ct__flabel,
.fabrica-block .fab-ct__input:not(:placeholder-shown) + .fab-ct__flabel {
    top: 0 !important;
    transform: translateY(-50%) scale(0.85);
    color: var(--fab-ct-accent, #0ea5e9) !important;
}

.fabrica-block .fab-ct__field--area .fab-ct__flabel {
    top: 1.15rem !important;
    transform: none;
}

.fabrica-block .fab-ct__field--area .fab-ct__input:focus + .fab-ct__flabel,
.fabrica-block .fab-ct__field--area .fab-ct__input:not(:placeholder-shown) + .fab-ct__flabel {
    top: 0 !important;
    transform: translateY(-50%) scale(0.85);
}

.fabrica-block .fab-ct__input:focus {
    border-color: var(--fab-ct-accent, #0ea5e9) !important;
}

button.fab-ct__pill,
.fabrica-block button.fab-ct__pill {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.4rem 0.9rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    color: #6b7280 !important;
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

button.fab-ct__pill:hover,
.fabrica-block button.fab-ct__pill:hover {
    border-color: #9ca3af !important;
    color: #374151 !important;
}

button.fab-ct__pill.is-on,
.fabrica-block button.fab-ct__pill.is-on {
    border-color: #111827 !important;
    color: #111827 !important;
    font-weight: 600 !important;
}

button.fab-ct__submit,
.fabrica-block button.fab-ct__submit {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0.5rem 0 0 !important;
    padding: 0.85rem 1rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: all 0.25s ease;
}

button.fab-ct__submit:hover,
.fabrica-block button.fab-ct__submit:hover {
    background: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
}

button.fab-ct__submit[disabled],
.fabrica-block button.fab-ct__submit[disabled] {
    opacity: 0.6;
    cursor: default;
}

.fabrica-block .fab-ct__check {
    margin-top: 0.15rem !important;
    width: 0.9rem !important;
    height: 0.9rem !important;
    flex: 0 0 auto;
}

.fab-ct__bg,
.fabrica-block img.fab-ct__bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Textos sobre la imagen: mismo blindaje de color que en los demas bloques. */
.fabrica-block .fab-ct__card p.fab-ct__form-title {
    color: #111827 !important;
}

.fabrica-block .fab-ct__card p.fab-ct__form-sub {
    color: #6b7280 !important;
}

/* Acordeon de preguntas frecuentes: los colores son configurables y llegan
   como variables CSS, y los estados abierto/cerrado se resuelven aqui. El JS
   solo alterna la clase .is-open (identico al componente Vue). */
.fab-faq__item {
    background-color: var(--fab-faq-closed, #e9e2d8);
}

.fab-faq__item.is-open {
    background-color: var(--fab-faq-open, #3b2a1a);
}

/* La maquetacion del encabezado NO puede depender de las utilidades de
   Tailwind: los temas estilizan los <button> con selectores tipo
   `button.algo` (0-1-1) que le ganan a `.flex` (0-1-0) y dejan el boton en
   display:block con el texto centrado. Se fija aqui, con !important. */
button.fab-faq__head,
.fabrica-block button.fab-faq__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem;
    width: 100% !important;
    text-align: left !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    cursor: pointer;
}

.fab-faq__icon,
.fabrica-block .fab-faq__icon {
    flex: 0 0 auto;
    width: 1.75rem !important;
    height: 1.75rem !important;
}

/* Sin esto la imagen se dibuja a su ancho natural (los resets del tema le
   ganan a `w-full`) y arrastra toda la columna fuera de la pantalla en movil,
   cortando tambien las preguntas. */
img.fab-faq__image,
.fabrica-block img.fab-faq__image {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}

/* La pregunta debe partir de linea. Hacen falta las tres cosas:
   - flex: 1 1 auto  -> ocupa el espacio libre y cede ante el icono
   - min-width: 0    -> un item de flex no baja de su ancho minimo sin esto
   - white-space     -> muchos temas ponen `nowrap` a los <button>, y eso
                        impide el salto de linea aunque haya espacio */
.fab-faq__q,
.fabrica-block .fab-faq__q {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

button.fab-faq__head,
.fabrica-block button.fab-faq__head {
    white-space: normal !important;
}

.fab-faq__item,
.fabrica-block .fab-faq__item {
    max-width: 100%;
}

/* Misma especificidad alta que en las tarjetas del hero: los temas pintan
   los <p> con reglas propias y dejarian la respuesta ilegible sobre la
   tarjeta oscura. */
.fab-faq__item .fab-faq__q,
.fabrica-block .fab-faq__item .fab-faq__q {
    color: #1f2937 !important;
}

.fab-faq__item.is-open .fab-faq__q,
.fabrica-block .fab-faq__item.is-open .fab-faq__q {
    color: #ffffff !important;
}

.fab-faq__item p.fab-faq__a,
.fabrica-block .fab-faq__item p.fab-faq__a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.fab-faq__icon {
    background-color: #1f2937;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.fab-faq__item.is-open .fab-faq__icon {
    background-color: rgba(255, 255, 255, 0.92);
    color: #1f2937;
    transform: rotate(90deg);
}

.fab-faq__panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.fab-faq__item.is-open .fab-faq__panel {
    max-height: 24rem;
    opacity: 1;
}

.fab-faq__btn {
    background-color: var(--fab-faq-accent, #c9a882);
}

/* Slider de testimonios: los puntos y el avatar necesitan reglas propias
   (los colores del punto activo no son utilidades de Tailwind y el avatar
   debe resistir los resets de imagen del tema). */
/* Los puntos son <button>: los temas de WordPress suelen darles borde,
   padding y alto mínimo. Se fija todo aquí (incluidas las medidas) para no
   depender de las utilidades de Tailwind ni pelear con el tema. */
button.fab-tm__dot,
.fabrica-block button.fab-tm__dot {
    display: block !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #d4d4d8 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0.5rem !important;
    height: 0.5rem !important;
    min-width: 0 !important;
    min-height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: width 0.3s ease-out, background-color 0.3s ease-out;
}

button.fab-tm__dot:hover,
.fabrica-block button.fab-tm__dot:hover {
    background-color: #a1a1aa !important;
}

button.fab-tm__dot--on,
.fabrica-block button.fab-tm__dot--on {
    width: 1.75rem !important;
    background-color: #3f3f46 !important;
}

img.fab-tm__avatar,
.fabrica-block img.fab-tm__avatar {
    height: 2.75rem !important;
    width: 2.75rem !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
    max-width: none !important;
}

/* La imagen de fondo del hero debe cubrir siempre toda la caja: los resets
   de imagen (del plugin o del tema) empatan en especificidad con h-full y la
   dejan en height:auto, que en móvil la reduce a una franja. */
.fab-hc__box > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Colores de acento configurables del bloque "Portada con tarjetas".
   Llegan como variables CSS en el style inline de la sección, porque son
   editables por bloque y no pueden ser utilidades de Tailwind. */
/* Valores por defecto de las variables de acento: si el bloque no las trae
   en su style inline, var() siempre resuelve a algo valido. */
.fabrica-block {
    --fab-accent: #d97706;
    --fab-accent-hover: #b45309;
}

/* ESPECIFICIDAD ALTA A PROPOSITO. Se midio en un sitio real que el titulo
   de la tarjeta salia en rgb(0,0,0) —ni siquiera nuestro gris— porque el
   tema pinta los <p> con `!important`. Con `!important` NO basta: si el tema
   usa `.elementor p` (0-1-1) le gana a `.fab-hc__title` (0-1-0). Por eso los
   selectores llevan el ancestro y el nombre de etiqueta: `.fabrica-block
   .fab-hc p.fab-hc__title` (0-3-1) gana a cualquier regla razonable de tema.
   Se listan tambien las variantes sin `.fabrica-block` para el preview de la
   fabrica, donde ese envoltorio no existe. */
.fab-hc .fab-hc__icon,
.fabrica-block .fab-hc .fab-hc__icon {
    color: var(--fab-accent, #d97706) !important;
}

.fab-hc p.fab-hc__title,
.fabrica-block .fab-hc p.fab-hc__title {
    color: #111827 !important;
    transition: color 0.3s ease-out;
}

.fab-hc:hover p.fab-hc__title,
.fabrica-block .fab-hc:hover p.fab-hc__title {
    color: var(--fab-accent-hover, #b45309) !important;
}

.fab-hc .fab-hc__line,
.fabrica-block .fab-hc .fab-hc__line {
    background-color: var(--fab-accent, #d97706) !important;
}

.fab-hc__shine {
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
    background-image: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--fab-accent, #d97706) 35%, transparent),
        transparent
    );
}