/* sfa-layout.css — capa de maquetación del tema hijo (sfalvarado.com). * Solo selectores con prefijo sfa-. Se carga después de brand.css. * Tarjetas de igual altura: el widget pxl_fancybox_grid usa Isotope, que posiciona cada * ítem con estilos en línea; aquí se devuelven al flujo con CSS Grid para que todas las * tarjetas de una cuadrícula tengan la misma altura (grid-auto-rows: 1fr). */ .sfa-cards .pxl-grid-inner{display:grid!important;grid-template-columns:repeat(var(--sfa-cols,3),minmax(0,1fr));grid-auto-rows:1fr;gap:30px;height:auto!important;margin:0!important;} .sfa-cards .pxl-grid-item{position:static!important;left:auto!important;top:auto!important;transform:none!important;width:auto!important;max-width:none!important;padding:0!important;} .sfa-cards .grid-sizer{display:none!important;} .sfa-cards .pxl-item--inner,.sfa-cards .pxl-item--holder{height:100%;} .sfa-cards--4{--sfa-cols:4;} @media (max-width:1199px){.sfa-cards--4{--sfa-cols:2;}} @media (max-width:1024px){.sfa-cards{--sfa-cols:2;}} @media (max-width:767px){.sfa-cards,.sfa-cards--4{--sfa-cols:1;}} /* Tarjetas sólidas: fondo Shadow para secciones de fondo claro (p. ej. "Lo que hago", fondo #F1EFEB). * Medido: título #E4E4E4 sobre #F1EFEB = 1.11:1 (ilegible); sobre #050505 = 16.0:1, texto 8.1:1, número 6.1:1. */ .sfa-cards--solid .pxl-item--inner{background-color:var(--secondary-color,#050505);border-color:transparent;} /* Hero: la imagen cubre todo el ancho. Medido: a 1920 px una regla del tema la escalaba por alto * (1717 px de ancho en una sección de 1910 px, ~190 px negros a la derecha). */ .sfa-hero .wrap-img-distortion img{width:100%!important;height:100%!important;object-fit:cover;} /* Tarjetas más compactas (medido: 41/50/49/40 px de relleno + 43 px de margen bajo el texto). */ .sfa-cards .pxl-grid-inner{gap:24px;} .sfa-cards .pxl-item--inner{padding:32px 32px 30px;} .sfa-cards .pxl-item--step{margin-bottom:12px;} .sfa-cards .pxl-item--desc{margin-bottom:0;} /* Proceso: título y texto visibles sin pasar el mouse (el tema los desplazaba fuera de la tarjeta * y los pintaba #050505 sobre #050505); el efecto al pasar el mouse se conserva. */ .sfa-process-open .pxl-process6 .pxl-list-content .pxl--item .pxl-item--title p, .sfa-process-open .pxl-process6 .pxl-list-content .pxl--item .pxl-item--description p{transform:none!important;} .sfa-process-open .pxl-process6 .pxl-list-content .pxl--item:not(:hover) .pxl-item--title p{color:var(--four-color,#E4E4E4);} .sfa-process-open .pxl-process6 .pxl-list-content .pxl--item:not(:hover) .pxl-item--description p{color:var(--third-color,#9FA4A6);} /* Línea corta naranja bajo los títulos (manual de marca, pp. 7, 8, 10 y 17). */ .sfa-title-line .elementor-widget-container::after{content:"";display:block;width:56px;height:3px;background:var(--primary-color,#FC5000);margin-top:18px;} .sfa-title-line--center .elementor-widget-container::after{margin-left:auto;margin-right:auto;} /* Formación: los ítems ya no enlazan a nada; se ocultan las flechas que sugerían un enlace. */ .sfa-formacion .btn-readmore{display:none!important;} /* Íconos de línea de la marca (manual p. 22, trazo naranja con corte) en las tarjetas ADN y servicios. * Ronda 16: escudo, balanza y ciclo son propios, dibujados en la misma línea (05_marca/iconos). */ .sfa-card-icons .pxl-item--holder::before{content:"";display:block;width:44px;height:40px;margin-bottom:22px;background:no-repeat left center/contain;} .sfa-icons-adn .pxl-grid-item:nth-child(1) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-shield.svg);} .sfa-icons-adn .pxl-grid-item:nth-child(2) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-gear.svg);} .sfa-icons-adn .pxl-grid-item:nth-child(3) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-balance.svg);} .sfa-icons-adn .pxl-grid-item:nth-child(4) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-chat.svg);} .sfa-icons-adn .pxl-grid-item:nth-child(5) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-document.svg);} .sfa-icons-adn .pxl-grid-item:nth-child(6) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-cycle.svg);} .sfa-icons-services .pxl-grid-item:nth-child(1) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-cursor.svg);} .sfa-icons-services .pxl-grid-item:nth-child(2) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-laptop.svg);} .sfa-icons-services .pxl-grid-item:nth-child(3) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-calendar.svg);} .sfa-icons-services .pxl-grid-item:nth-child(4) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-user.svg);} /* Cifras en tarjetas con borde naranja (manual p. 5: borde 2px; esquina 24.7px a 1920 → 18px). */ .sfa-counter-cards.e-con{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;} .sfa-counter-cards > .elementor-widget,.sfa-counter-cards > .e-con-inner > .elementor-widget{border:2px solid var(--primary-color,#FC5000);border-radius:18px;padding:22px 24px;width:auto!important;max-width:none!important;} @media (max-width:767px){.sfa-counter-cards.e-con{grid-template-columns:1fr;}} /* Objetivos táctiles de al menos 44 px (medido: "HABLEMOS" 26px de alto; enlaces verticales 21px). */ .sfa-tap .btn{min-height:44px;display:inline-flex;align-items:center;} .sfa-tap-vertical a{display:inline-block;padding:12px 4px;} /* Regla de imagen del manual (p. 25): fotografías en blanco y negro. Para imágenes futuras (p. ej. portafolio). */ .sfa-bn img{filter:grayscale(1);} /* Enlace de LinkedIn del footer: área táctil de 44 px (medido 82×23 px a 390). */ .sfa-tap-link a{display:inline-flex;align-items:center;min-height:44px;} /* R12 — hover de tarjetas: en vez del fondo claro del tema (texto ilegible), la tarjeta sube 8 px y toma borde naranja. Colores del texto sin cambio. */ .sfa-cards .pxl-grid-item .pxl-item--inner{transition:transform .35s cubic-bezier(.645,.045,.355,1),border-color .35s,box-shadow .35s} .sfa-cards .pxl-grid-item .pxl-item--inner:hover{background-color:transparent;border-color:var(--primary-color);transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,.35)} .sfa-cards.sfa-cards--solid .pxl-grid-item .pxl-item--inner:hover{background-color:var(--secondary-color)} .sfa-cards .pxl-grid-item .pxl-item--inner:hover .pxl-item--title{color:var(--four-color)} .sfa-cards .pxl-grid-item .pxl-item--inner:hover .pxl-item--desc{color:var(--third-color)} @media (prefers-reduced-motion:reduce){.sfa-cards .pxl-grid-item .pxl-item--inner:hover{transform:none}} /* R12b — tarjetas de proyecto: el enlace de la imagen ocupa toda la imagen; los servicios dentro de la tarjeta no son un objetivo táctil propio (23 px) — la tarjeta completa ya enlaza al proyecto. */ .pxl-post--featured > a:first-child{display:block} .pxl-post--category a{pointer-events:none;cursor:default} /* Ronda 14 — margen lateral único de 93 px para todo el contenido en escritorio (≥1025 px). * Los fondos (hero, "Lo que hago", pie) siguen ocupando todo el ancho; solo se mueve el contenido. * Las tarjetas y cajas con borde o fondo propio conservan su relleno interno. */ @media (min-width: 1025px) { :root { --sfa-gutter: 93px; } .elementor-14609 > .e-con, #pxl-header-elementor .elementor > .e-con, #pxl-footer-elementor .elementor > .e-con { --padding-left: var(--sfa-gutter) !important; --padding-right: var(--sfa-gutter) !important; } .elementor-14609 > .e-con > .e-con-inner, #pxl-header-elementor .elementor > .e-con > .e-con-inner, #pxl-footer-elementor .elementor > .e-con > .e-con-inner, .elementor-element-9ceed08 > .e-con-inner, .elementor-element-0d7d218 > .e-con-inner, .elementor-element-b21e879 > .e-con-inner { max-width: none !important; } /* Rellenos internos que desplazaban el contenido más allá del margen. */ .elementor-element-498028b, .elementor-element-f5eaa05, .elementor-element-5ce44fe, .elementor-element-b13p003, .elementor-element-435a2f0, .elementor-element-ff7f39a, .elementor-element-0d7d218, .elementor-element-b21e879 { --padding-left: 0px !important; --padding-right: 0px !important; } /* "Lo que hago": el fondo va de borde a borde y el margen lo pone el contenedor del fondo. */ .elementor-14609 > .e-con.elementor-element-67971b1 { --padding-left: 0px !important; --padding-right: 0px !important; } .elementor-element-5d3a7cf { --padding-left: var(--sfa-gutter) !important; --padding-right: var(--sfa-gutter) !important; } /* Botón de contacto del header alineado al margen derecho. */ #pxl-header-elementor .elementor-element.elementor-element-05c2f5e { --justify-content: flex-end !important; justify-content: flex-end !important; } /* Texto vertical "Encuéntrame — LinkedIn / Contacto" del hero: su borde visible queda en el margen. */ .elementor-14609 .elementor-element.elementor-element-9d043d0 { right: -116px !important; } } /* Ronda 14b — entre 1025 y 1199 px el tema usa su header móvil; también va al margen de 93 px. */ @media (min-width: 1025px) { #pxl-header-mobile #pxl-header-main > .container { padding-left: var(--sfa-gutter) !important; padding-right: var(--sfa-gutter) !important; max-width: none !important; } #pxl-header-mobile #pxl-nav-mobile { right: var(--sfa-gutter) !important; } } /* Ronda 14c — el mismo margen en todas las páginas y proyectos hechos con Elementor (Sobre mí, Proyectos, casos). */ @media (min-width: 1025px) { .elementor[data-elementor-type="wp-page"] > .e-con, .elementor[data-elementor-type="wp-post"] > .e-con { --padding-left: var(--sfa-gutter) !important; --padding-right: var(--sfa-gutter) !important; } .elementor[data-elementor-type="wp-page"] > .e-con > .e-con-inner, .elementor[data-elementor-type="wp-post"] > .e-con > .e-con-inner { max-width: none !important; } } /* Ronda 15 — las líneas blancas de los marcos quedan sobre el margen de 93 px y el contenido dentro de un marco * respira 40 px (recomendaciones, columna del formulario, llamado del pie). El fondo de "Lo que hago" vuelve a ir * de borde a borde (la regla general de 14c le ganaba por orden). */ @media (min-width: 1025px) { :root { --sfa-frame-pad: 40px; } .elementor[data-elementor-type="wp-page"] > .e-con.elementor-element-67971b1 { --padding-left: 0px !important; --padding-right: 0px !important; } .elementor-14609 .elementor-element.elementor-element-ff7f39a, .elementor-14609 .elementor-element.elementor-element-0d7d218, .elementor-14609 .elementor-element.elementor-element-b21e879, .elementor-14609 .elementor-element.elementor-element-303d80f { --padding-left: var(--sfa-frame-pad) !important; --padding-right: var(--sfa-frame-pad) !important; } #pxl-footer-elementor .elementor-element.elementor-element-4eb3e37 { --padding-right: var(--sfa-frame-pad) !important; } } /* Foto del perfil a tamaño completo, sin el efecto de crecer al hacer scroll. */ .elementor-element-a19i001 img { width: 100%; height: auto; } /* "Lo que hago": el texto bajo "Capacidades" con más peso para leerse bien sobre el degradado. */ .elementor-element-32bf7a8 .pxl-item--title { font-weight: 600; } /* Llamado del pie: en la Home (que ya termina en el formulario) invita a ver proyectos; en las demás páginas, a escribir. */ body.home .sfa-sin-home, body:not(.home) .sfa-solo-home { display: none !important; } /* Ronda 15b — el título del formulario ("Empecemos / una conversación.") cabe en su caja: medido a 1440 px, * "CONVERSACIÓN." a 50 px medía ~450 px en una caja de 333 px y se salía sobre la imagen. */ @media (min-width: 1025px) { .elementor-14609 .elementor-element-2b2e79b, .elementor-14609 .elementor-element-488a211 { width: 100% !important; max-width: 100% !important; } .elementor-14609 .elementor-element-2b2e79b .pxl-item--title, .elementor-14609 .elementor-element-488a211 .pxl-item--title { font-size: clamp(24px, 2.3vw, 50px) !important; line-height: 1.2 !important; } } /* Llamado del pie en la Home: dos líneas en lugar de tres. */ #pxl-footer-elementor .elementor-element-b15f001 .pxl-heading--inner { max-width: 420px !important; } /* Ronda 17b — menú de 6 entradas en una sola línea (medido: a 1440 px necesitaba ~985 px y tenía 702 px). * El menú ocupa todo el espacio entre el logo y el botón; el botón toma su ancho natural; el texto y la * separación se ajustan al ancho de pantalla. El header de escritorio aparece desde 1200 px. */ @media (min-width: 1200px) { #pxl-header-elementor .elementor-element.elementor-element-c06afad { flex: 1 1 auto !important; width: auto !important; justify-content: center !important; --justify-content: center !important; --padding-left: 16px !important; --padding-right: 16px !important; } #pxl-header-elementor .elementor-element.elementor-element-05c2f5e { flex: 0 0 auto !important; width: auto !important; --padding-left: 0px !important; } #pxl-header-elementor .elementor-element.elementor-element-7598cb0 .btn { min-width: 0 !important; width: auto !important; padding-left: 28px !important; padding-right: 28px !important; column-gap: 28px !important; } #pxl-header-elementor .elementor-element.elementor-element-f2bd3e2 .pxl-menu-primary > li { margin: 0 clamp(8px, 0.9vw, 16px) !important; } #pxl-header-elementor .elementor-element.elementor-element-f2bd3e2 .pxl-menu-primary > li > a, #pxl-header-elementor .elementor-element.elementor-element-f2bd3e2 .pxl-menu-primary > li > a .pxl-menu-item-text { font-size: clamp(12px, 0.92vw, 14px) !important; letter-spacing: clamp(0.6px, 0.08vw, 1.4px) !important; } } @media (min-width: 1200px) and (max-width: 1279px) { #pxl-header-elementor .elementor-element.elementor-element-f2bd3e2 .pxl-menu-primary > li { margin: 0 6px !important; } #pxl-header-elementor .elementor-element.elementor-element-f2bd3e2 .pxl-menu-primary > li > a, #pxl-header-elementor .elementor-element.elementor-element-f2bd3e2 .pxl-menu-primary > li > a .pxl-menu-item-text { font-size: 11px !important; letter-spacing: 0.5px !important; } #pxl-header-elementor .elementor-element.elementor-element-c06afad { --padding-left: 8px !important; --padding-right: 8px !important; } } /* Ronda 18 — sección "Enfoque" (Home): tres columnas de texto bajo el encabezado. */ .elementor-14609 .elementor-element.elementor-element-c18s006 { gap: 48px; align-items: flex-start; } .elementor-14609 .elementor-element-c18s006 > .elementor-widget { flex: 1 1 0; min-width: 0; margin-top: 0 !important; } .elementor-14609 .elementor-element-c18s006 .pxl-heading--inner { max-width: none !important; } .elementor-14609 .elementor-element-c18s006 .pxl-item--subtitle { color: #FC5000; } @media (max-width: 1024px) { .elementor-14609 .elementor-element.elementor-element-c18s006 { flex-direction: column !important; gap: 32px; } } /* Ronda 18b — "Enfoque" al margen de 93 px (sus filas clonadas traían 3.906vw de relleno; medido: 149 px). */ @media (min-width: 1025px) { .elementor-14609 .elementor-element.elementor-element-c18s003, .elementor-14609 .elementor-element.elementor-element-c18s006 { --padding-left: 0px !important; --padding-right: 0px !important; } } /* Ronda 19 — ajustes del diseño en Figma (archivo "SERGIO Sitio Web", frame Home 1790 px). Medidas del diseño. */ /* Header: logo 202 px (sticky 90 px), menú alineado a la izquierda a 76 px del logo, "//" antes de cada opción * (el del efecto hover del tema; en Figma se ve fijo, pero no se agrega uno estático: ronda 19f), botón de contacto * 300×50 con borde. */ @media (min-width: 1200px) { #pxl-header-elementor .elementor-element.elementor-element-a17h001, #pxl-header-elementor .elementor-element.elementor-element-a17h002 { flex: 0 0 auto !important; width: auto !important; } #pxl-header-elementor .pxl-header-elementor-main .elementor-element-a17h001 img { width: 202px !important; max-width: none !important; height: auto !important; } #pxl-header-elementor .pxl-header-elementor-sticky .elementor-element-a17h002 img { width: 90px !important; height: auto !important; } #pxl-header-elementor .elementor-element.elementor-element-c06afad { justify-content: flex-start !important; --justify-content: flex-start !important; --padding-left: 6px !important; --padding-right: 24px !important; } #pxl-header-elementor .elementor-element.elementor-element-f2bd3e2 .pxl-menu-primary > li { margin: 0 clamp(12px, 2.07vw, 37px) 0 0 !important; } #pxl-header-elementor .elementor-element.elementor-element-05c2f5e { min-width: 300px !important; } #pxl-header-elementor .elementor-element.elementor-element-7598cb0, #pxl-header-elementor .elementor-element-7598cb0 .pxl-button { width: 300px !important; max-width: none !important; } #pxl-header-elementor .elementor-element.elementor-element-7598cb0 .btn { width: 300px !important; max-width: none !important; min-width: 0 !important; height: 50px !important; justify-content: space-between !important; padding: 0 28px !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #fff !important; } #pxl-header-elementor .elementor-element.elementor-element-7598cb0 .btn:hover { background: #fff !important; color: #030303 !important; } } /* Botones de contenido: 300×48 (componente "Botón Principal", variante Relleno). */ .elementor-14609 .elementor-element-a20h001 .btn, .elementor-14609 .elementor-element-b13p007 .btn, .elementor-14609 .elementor-element-c19b001 .btn { width: 300px !important; max-width: 100% !important; min-width: 0 !important; height: 48px !important; } /* Encabezados de sección apilados: etiqueta → título → barra naranja → texto, todo a la izquierda. */ .elementor-14609 .elementor-element.elementor-element-b13p003, .elementor-14609 .elementor-element.elementor-element-c18s003, .elementor-14609 .elementor-element.elementor-element-435a2f0 { flex-direction: column !important; --flex-direction: column !important; align-items: flex-start !important; --align-items: flex-start !important; } .elementor-14609 .elementor-element.elementor-element-b13p005, .elementor-14609 .elementor-element.elementor-element-c18s005, .elementor-14609 .elementor-element.elementor-element-32bf7a8 { margin-top: 20px !important; --margin-top: 20px !important; } .elementor-14609 .elementor-element-b13p005 .pxl-heading--inner, .elementor-14609 .elementor-element-c18s005 .pxl-heading--inner, .elementor-14609 .elementor-element-32bf7a8 .pxl-heading--inner { max-width: 620px !important; } /* Perfil: texto 24/34 y foto 697×632 con esquinas de 20 px; el botón queda alineado con el pie de la foto. */ @media (min-width: 1200px) { .elementor-14609 .elementor-element.elementor-element-f0aae46 > .e-con-inner { justify-content: space-between !important; align-items: stretch !important; } .elementor-14609 .elementor-element.elementor-element-24857d9, .elementor-14609 .elementor-element.elementor-element-a18c001 { flex: 0 0 43.45% !important; width: 43.45% !important; max-width: 43.45% !important; } .elementor-14609 .elementor-element.elementor-element-24857d9 { justify-content: space-between !important; --justify-content: space-between !important; } .elementor-14609 .elementor-element-f3d8c9e p { font-size: 24px !important; line-height: 34px !important; } } .elementor-14609 .elementor-element-a19i001 img { aspect-ratio: 697 / 632; object-fit: cover; border-radius: 20px; } /* Cómo trabajo: sin la línea superior; texto a la izquierda y botón "hablemos" a la derecha. */ .elementor-14609 .elementor-element.elementor-element-12ccb4e { border: 0 !important; } .elementor-14609 .elementor-element-12ccb4e > .pxl-border-animated { display: none !important; } .elementor-14609 .elementor-element-c19r001 .elementor-element-b44b6f1 { max-width: 640px; } @media (max-width: 767px) { .elementor-14609 .elementor-element.elementor-element-c19r001 { flex-direction: column !important; align-items: flex-start !important; gap: 24px; } } /* Contacto: degradado a la izquierda y la caja clara al centro. */ @media (min-width: 1025px) { .elementor-14609 .elementor-element.elementor-element-437424f { flex-direction: row-reverse !important; --flex-direction: row-reverse !important; } } /* Pie: un mismo llamado en todo el sitio ("¿Quieres ver más de mi trabajo?"), salvo en las páginas de proyectos, * donde sería un enlace a sí mismas y se muestra "¿Hablamos?". */ body:not(.page-id-14784):not(.single-portfolio) .sfa-sin-home { display: none !important; } body:not(.page-id-14784):not(.single-portfolio) .sfa-solo-home { display: block !important; } body.page-id-14784 .sfa-solo-home, body.single-portfolio .sfa-solo-home { display: none !important; } body.page-id-14784 .sfa-sin-home, body.single-portfolio .sfa-sin-home { display: block !important; } #pxl-footer-elementor .elementor-element-b15f001 .pxl-heading--inner { max-width: none !important; } /* Ronda 19b — espaciado vertical de la Home igual al diseño (medido a 1790 px contra el frame de Figma): * 100 px entre secciones, etiqueta→título 20, título→texto 103 (con la barra naranja), texto→contenido 40–100. */ @media (min-width: 1200px) { .elementor-14609 .elementor-element.elementor-element-f0aae46 { min-height: 0 !important; --min-height: 0px !important; } .elementor-14609 .elementor-element.elementor-element-f0aae46 > .e-con-inner { padding-top: 53px !important; padding-bottom: 100px !important; min-height: 0 !important; } .elementor-14609 .elementor-element-f3d8c9e .elementor-widget-container, .elementor-14609 .elementor-element-f3d8c9e .pxl-text-editor { max-width: none !important; width: 100% !important; } .elementor-14609 .elementor-element-f3d8c9e .pxl-item--inner { display: block !important; width: 100% !important; } .elementor-14609 .elementor-element.elementor-element-b13p003, .elementor-14609 .elementor-element.elementor-element-c18s003 { --padding-top: 0px !important; padding-top: 0 !important; } .elementor-14609 .elementor-element.elementor-element-b13p002 { --padding-bottom: 100px !important; padding-bottom: 100px !important; } .elementor-14609 .elementor-element.elementor-element-b13p006 { margin-top: 18px !important; } .elementor-14609 .elementor-element.elementor-element-b13p007 { margin-top: 20px !important; } .elementor-14609 .elementor-element.elementor-element-c18s006 { --padding-top: 15px !important; padding-top: 15px !important; } .elementor-14609 .elementor-element-c18s006 .pxl-item--subtitle { margin-bottom: 20px !important; } .elementor-14609 .elementor-element.elementor-element-c18s002 { --padding-bottom: 160px !important; padding-bottom: 160px !important; } .elementor-14609 .elementor-element.elementor-element-435a2f0 { --padding-top: 85px !important; padding-top: 85px !important; } .elementor-14609 .elementor-element.elementor-element-5d3a7cf { --padding-bottom: 55px !important; padding-bottom: 55px !important; } .elementor-14609 .elementor-element.elementor-element-a18f002 { margin-top: 54px !important; } .elementor-14609 .elementor-element.elementor-element-9b0cb45 { --padding-top: 100px !important; padding-top: 100px !important; --padding-bottom: 20px !important; padding-bottom: 20px !important; row-gap: 16px !important; --row-gap: 16px !important; } .elementor-14609 .elementor-element.elementor-element-c19r001 { --padding-top: 0px !important; --padding-bottom: 0px !important; padding-top: 0 !important; padding-bottom: 0 !important; } .elementor-14609 .elementor-element.elementor-element-a16f001 { margin-top: 20px !important; } .elementor-14609 .elementor-element.elementor-element-5d4d21c { margin-top: 0 !important; } .elementor-14609 .elementor-element.elementor-element-9ee106e { margin-bottom: 100px !important; } } .elementor-14609 .elementor-element-b13p005 > .elementor-widget-container, .elementor-14609 .elementor-element-c18s005 > .elementor-widget-container, .elementor-14609 .elementor-element-32bf7a8 > .elementor-widget-container, .elementor-14609 .elementor-element-ee1fd6b > .elementor-widget-container { margin-top: 0 !important; } .elementor-14609 .elementor-element.elementor-element-b13p005, .elementor-14609 .elementor-element.elementor-element-c18s005, .elementor-14609 .elementor-element.elementor-element-32bf7a8 { margin-top: 2px !important; --margin-top: 2px !important; } .elementor-14609 .elementor-element-b13p005 .pxl-item--subtitle, .elementor-14609 .elementor-element-c18s005 .pxl-item--subtitle, .elementor-14609 .elementor-element-32bf7a8 .pxl-item--subtitle { display: none !important; } .elementor-14609 .elementor-element-ee1fd6b .pxl-item--title { margin-bottom: 0 !important; } .elementor-14609 .elementor-element-b44b6f1 > .elementor-widget-container, .elementor-14609 .elementor-element-f3d8c9e > .elementor-widget-container { margin-bottom: 0 !important; } /* Tarjetas de proyecto 386×325 con esquinas de 8 px y 20 px entre tarjetas. */ #proyectos .elementor-element-b13p006 .pxl-grid-inner { margin-left: -10px !important; margin-right: -10px !important; } #proyectos .elementor-element-b13p006 .pxl-grid-item { padding-left: 10px !important; padding-right: 10px !important; margin-bottom: 0 !important; } #proyectos .pxl-grid-item .pxl-post--featured { border-radius: 8px; overflow: hidden; } /* Ronda 19c — medido tras 19b a 1790 px: el texto del perfil seguía limitado a 526 px por un ajuste del widget; la * imagen de las tarjetas de proyecto era cuadrada (384×384) en lugar de 386×325; el pie medía 831 px contra 674. */ @media (min-width: 1200px) { .elementor-14609 .elementor-element.elementor-element-f3d8c9e .pxl-text-editor .pxl-item--inner { max-width: none !important; } #pxl-footer-elementor .elementor-element.elementor-element-b5666ce { --padding-top: 30px !important; padding-top: 30px !important; } #pxl-footer-elementor .elementor-element.elementor-element-4eb3e37 { --padding-top: 30px !important; --padding-bottom: 30px !important; padding-top: 30px !important; padding-bottom: 30px !important; } #pxl-footer-elementor .elementor-element.elementor-element-92431ca { --padding-top: 30px !important; --padding-bottom: 30px !important; padding-top: 30px !important; padding-bottom: 30px !important; } #pxl-footer-elementor .elementor-element-b15f001 .pxl-item--title, #pxl-footer-elementor .elementor-element-9f2f832 .pxl-item--title { font-size: 24px !important; line-height: 30px !important; font-weight: 600 !important; margin-bottom: 0 !important; } #pxl-footer-elementor .elementor-element-b15f001 > .elementor-widget-container, #pxl-footer-elementor .elementor-element-9f2f832 > .elementor-widget-container { margin-bottom: 0 !important; } } #proyectos .pxl-grid-item .pxl-post--featured { aspect-ratio: 386 / 325; } #proyectos .pxl-grid-item .pxl-post--featured img { width: 100% !important; height: 100% !important; object-fit: cover; position: static !important; transform: none !important; } /* Ronda 19d — medido tras 19c a 1790 px contra Figma 19:1784: el botón de proyectos quedaba 26 px arriba; el texto de * "Cómo trabajo" tenía 10 px de sangría (padding lateral del contenedor); en el pie, "Ciudad de Guatemala" va centrada * en su propia fila de 101 px con línea divisoria, y la fila del logo mide 181 px con logo y lema a 93 px del marco. */ .elementor-14609 .elementor-element.elementor-element-c19r001 { --padding-left: 0px !important; --padding-right: 0px !important; padding-left: 0 !important; padding-right: 0 !important; } @media (min-width: 1200px) { .elementor-14609 .elementor-element.elementor-element-b13p007 { margin-top: 46px !important; } #pxl-footer-elementor .elementor-element.elementor-element-b5666ce { --padding-bottom: 0px !important; padding-bottom: 0 !important; } #pxl-footer-elementor .elementor-element.elementor-element-7a2d326 { --padding-top: 60px !important; --padding-left: 93px !important; --padding-right: 93px !important; padding: 60px 93px 0 93px !important; min-height: 181px; align-items: flex-start; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; } #pxl-footer-elementor .elementor-element.elementor-element-a2eb82d { width: 150px !important; max-width: 150px !important; } #pxl-footer-elementor .elementor-element.elementor-element-68a02f5 { --padding-left: 0px !important; --padding-right: 0px !important; padding: 0 !important; margin-top: -20px !important; min-height: 101px; justify-content: center !important; align-items: center !important; } #pxl-footer-elementor .elementor-element.elementor-element-e316972 { --width: auto !important; width: auto !important; padding: 0 !important; } } /* Ronda 19e — a 1440 y 1280 px el menú se partía en dos líneas (logo 202 + botón 300 + separaciones de 30 px no caben). * Logo, botón y separación escalan con el ancho y llegan a los valores del diseño en 1790 px (202 / 300 / 37). * Pie: el título gigante quedaba 24 px más abajo que en el diseño (relleno superior 30 contra 6). */ @media (min-width: 1200px) { html #pxl-header-elementor .pxl-header-elementor-main .elementor-element-a17h001 img { width: clamp(140px, 11.3vw, 202px) !important; } html #pxl-header-elementor .elementor-element.elementor-element-05c2f5e { min-width: clamp(200px, 16.76vw, 300px) !important; } html #pxl-header-elementor .elementor-element.elementor-element-7598cb0, html #pxl-header-elementor .elementor-element-7598cb0 .pxl-button, html #pxl-header-elementor .elementor-element.elementor-element-7598cb0 .btn { width: clamp(200px, 16.76vw, 300px) !important; } html #pxl-header-elementor .elementor-element.elementor-element-f2bd3e2 .pxl-menu-primary > li { margin: 0 clamp(10px, calc((100vw - 1440px) * 0.077 + 10px), 37px) 0 0 !important; } html #pxl-footer-elementor .elementor-element.elementor-element-b5666ce { --padding-top: 6px !important; padding-top: 6px !important; } } @media (min-width: 1200px) and (max-width: 1439px) { html #pxl-header-elementor .elementor-element.elementor-element-c06afad { --padding-right: 0px !important; } } /* Ronda 21 — revisión de páginas internas (medido a 1215–1790 px y 375 px). * Botón principal (Figma "Botón Principal", 300 px): texto a 28 px del borde izquierdo y flecha a 28 px del derecho. * sfa-buttons.js calcula la distancia de la flecha para que llene el botón (--sfa-arrow-gap); se usa solo en reposo, * así el tema sigue acercando la flecha al texto al pasar el cursor. Sustituye el ajuste fijo de la ronda 20. */ .btn.sfa-arrow-fit { padding-left: 28px !important; padding-right: 28px !important; column-gap: 0 !important; } .btn.sfa-arrow-fit svg { flex-shrink: 0 !important; width: 16px !important; } .btn.sfa-arrow-fit:not(:hover) svg { margin-left: var(--sfa-arrow-gap) !important; } html body #pxl-header-elementor .elementor-element.elementor-element-7598cb0 .btn.sfa-arrow-fit { column-gap: 0 !important; } /* Botones de Sobre mí y del detalle de proyecto con la medida del botón principal. */ .elementor .elementor-element.elementor-element-a20s002 .pxl-button .btn, .elementor .elementor-element.elementor-element-e462134 .pxl-button .btn, .elementor .elementor-element.elementor-element-a20d001 .pxl-button .btn { width: 300px !important; max-width: 100% !important; min-width: 0 !important; height: 48px !important; } /* Header: entre 1200 y 1789 px el botón de contacto se encogía hasta dejar la flecha fuera y el "//" de la opción * activa (dibujado 15 px a la izquierda del texto) tocaba la opción anterior. Logo, botón y separación escalan * juntos; la separación nunca baja de 22 px. En 1790 px: 202 / 300 / 37, como en el diseño. */ @media (min-width: 1200px) { html body #pxl-header-elementor .pxl-header-elementor-main .elementor-element-a17h001 img { width: clamp(120px, calc(202px - (1790px - 100vw) * 0.14), 202px) !important; } html body #pxl-header-elementor .elementor-element.elementor-element-05c2f5e { min-width: clamp(170px, calc(300px - (1790px - 100vw) * 0.22), 300px) !important; } html body #pxl-header-elementor .elementor-element.elementor-element-7598cb0, html body #pxl-header-elementor .elementor-element-7598cb0 .pxl-button, html body #pxl-header-elementor .elementor-element.elementor-element-7598cb0 .btn { width: clamp(170px, calc(300px - (1790px - 100vw) * 0.22), 300px) !important; } html body #pxl-header-elementor .elementor-element.elementor-element-f2bd3e2 .pxl-menu-primary > li { margin: 0 clamp(22px, calc(22px + (100vw - 1215px) * 0.0261), 37px) 0 0 !important; } } /* Categorías de los proyectos tal como están escritas ("Gestión de proyectos", no "Gestión De Proyectos"). */ .pxl-grid-item .pxl-post--category a { text-transform: none !important; } /* Tarjetas de proyecto iguales en todo el sitio: 386×325, esquinas de 8 px (listado y "Más proyectos"). */ .elementor-element-b21g001 .pxl-grid-inner { margin-left: -10px !important; margin-right: -10px !important; } .elementor-element-b21g001 .pxl-grid-item { padding-left: 10px !important; padding-right: 10px !important; margin-bottom: 0 !important; } .elementor-element-b21g001 .pxl-post--featured, .elementor-element-334f9c4 .pxl-post--featured { border-radius: 8px; overflow: hidden; aspect-ratio: 386 / 325; } .elementor-element-b21g001 .pxl-post--featured img, .elementor-element-334f9c4 .pxl-post--featured img { width: 100% !important; height: 100% !important; object-fit: cover; position: static !important; transform: none !important; } /* Ronda 21c — Sobre mí empezaba 26 px bajo el header (Proyectos 62, proyecto 52): baja 34 px. "Más proyectos" quedaba * a 24 px del pie: 100 px de aire, 60 en móvil. */ @media (min-width: 1200px) { .elementor-14785 > .elementor-element.elementor-element-f0aae46 { margin-top: 34px !important; } } .single-portfolio .elementor-element.elementor-element-e9982d3 { padding-bottom: 100px !important; } @media (max-width: 767px) { .single-portfolio .elementor-element.elementor-element-e9982d3 { padding-bottom: 60px !important; } } /* Ronda 22 — pie: al pasar el cursor por "LinkedIn" el tema mostraba el logo de la red encima del texto. Se oculta; el * subrayado del enlace se mantiene. */ #pxl-footer-elementor .elementor-element-8dcacd9 .pxl-item--link a i, #pxl-footer-elementor .elementor-element-8dcacd9 .pxl-item--link a svg { display: none !important; } /* Sobre mí — "Herramientas": cuatro tarjetas con íconos de la línea de marca y cada herramienta como etiqueta. */ .sfa-icons-tools .pxl-grid-item:nth-child(1) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-cursor.svg);} .sfa-icons-tools .pxl-grid-item:nth-child(2) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-laptop.svg);} .sfa-icons-tools .pxl-grid-item:nth-child(3) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-calendar.svg);} .sfa-icons-tools .pxl-grid-item:nth-child(4) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-bulb.svg);} .sfa-tools .pxl-item--desc { display: flex; flex-wrap: wrap; gap: 8px; } .sfa-tools .pxl-item--desc span { display: inline-block; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; font-size: 14px; line-height: 20px; color: #E4E4E4; transition: border-color 0.2s ease, color 0.2s ease; } .sfa-tools .pxl-grid-item:hover .pxl-item--desc span { border-color: rgba(252, 80, 0, 0.6); } /* Ronda 22b — las tarjetas de herramientas salían en 3 columnas (la cuarta abajo): 4 en escritorio, 2 en tablet, 1 en * móvil. Las recomendaciones, ahora en Sobre mí, recuperan los 40 px de aire dentro del marco que tenían en la Home. */ .sfa-tools { --sfa-cols: 4; } @media (max-width: 1199px) { .sfa-tools { --sfa-cols: 2; } } @media (max-width: 767px) { .sfa-tools { --sfa-cols: 1; } } @media (min-width: 1025px) { .elementor-14785 .elementor-element.elementor-element-ff7f39a, .elementor-14785 .elementor-element.elementor-element-0d7d218, .elementor-14785 .elementor-element.elementor-element-b21e879 { --padding-left: var(--sfa-frame-pad) !important; --padding-right: var(--sfa-frame-pad) !important; } } /* Ronda 24 — "Herramientas" con el ritmo de la Home (medido a 1440 px). Antes: tarjetas de 108 a 1318 px (la Home va * de 93 a 1333), 126 px antes de la etiqueta (Home 100), 107 px entre encabezado y tarjetas (Home 40), 86 px al final * (Home 100) y tarjetas de 411 px de alto con 43 px vacíos bajo las etiquetas. */ @media (min-width: 1025px) { /* Solo las variables: Elementor aplica el relleno en el bloque interior y un padding directo lo duplicaría. */ .elementor-14785 .elementor-element.elementor-element-t22s001 { --padding-top: 100px !important; } .elementor-14785 .elementor-element.elementor-element-t22s010 { --padding-top: 20px !important; --padding-bottom: 100px !important; --padding-left: 0px !important; --padding-right: 0px !important; } } .sfa-tools .pxl-item--inner { padding: 36px 40px 36px 40px !important; } .sfa-tools .pxl-item--desc { margin-bottom: 0 !important; gap: 6px; } .sfa-tools .pxl-item--desc span { padding: 4px 12px; font-size: 13px; line-height: 20px; } /* Ronda 24b — en Sobre mí, la etiqueta y el texto de Herramientas, Experiencia y Formación empezaban 13 px a la * derecha del margen (106 px contra 93 de las tarjetas y del encabezado de la página): margen heredado del widget. * En móvil cada tarjeta de herramientas toma la altura de su contenido (antes todas medían lo que la más alta). */ .elementor-14785 .elementor-element-t22s003 > .elementor-widget-container, .elementor-14785 .elementor-element-c17x003 > .elementor-widget-container, .elementor-14785 .elementor-element-e3a0c41 > .elementor-widget-container { margin-left: 0 !important; } @media (max-width: 767px) { .sfa-tools .pxl-grid-inner { grid-auto-rows: auto !important; } } /* Ronda 25 — medido a 2000 px: las tarjetas de Herramientas tenían un ancho máximo de 1290 px (heredado del contenedor * de Experiencia) y quedaban centradas (348–1638 px); la sección de contacto de la Home tenía 1770 px como máximo y * quedaba 15 px dentro del margen. Ahora ocupan todo el ancho entre los márgenes de 93 px. */ .elementor-14785 .elementor-element.elementor-element-t22s010, .elementor-14609 .elementor-element.elementor-element-a2af752 { --content-width: 100% !important; } .elementor-14785 .elementor-element.elementor-element-t22s010 > .e-con-inner, .elementor-14609 .elementor-element.elementor-element-a2af752 > .e-con-inner { max-width: none !important; } /* Herramientas: seis categorías en 3 columnas, como "Cómo trabajo" en la Home. Íconos de la línea de marca. */ .sfa-tools { --sfa-cols: 3; } @media (max-width: 1199px) { .sfa-tools { --sfa-cols: 2; } } @media (max-width: 767px) { .sfa-tools { --sfa-cols: 1; } } .sfa-icons-tools .pxl-grid-item:nth-child(3) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-document.svg);} .sfa-icons-tools .pxl-grid-item:nth-child(4) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-calendar.svg);} .sfa-icons-tools .pxl-grid-item:nth-child(5) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-cycle.svg);} .sfa-icons-tools .pxl-grid-item:nth-child(6) .pxl-item--holder::before{background-image:url(../img/icons/sfa-icon-bulb.svg);} /* Ronda 26 — foco visible (auditoría A11Y-006, WCAG 2.4.7). Tras 5×Tab el elemento enfocado no tenía outline ni * box-shadow. Anillo naranja de marca solo con teclado (:focus-visible); el clic con mouse no lo muestra. */ :focus-visible { outline: 2px solid var(--primary-color) !important; outline-offset: 3px !important; } /* Rondas 29–30 — cintillo de cookies al pie de la pantalla (sfa-consent.js). Ronda 30 (D-69): solo Aceptar (botón * principal) y Rechazar (contorno, menos peso). Contrastes: Silver Mist sobre #111 15:1; #050505 sobre naranja 6.1:1; * blanco sobre #111 18:1. */ .sfa-consent { position: fixed; z-index: 99990; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px 40px; padding: 18px var(--sfa-gutter, 16px) calc(18px + env(safe-area-inset-bottom, 0px)); background: #111111; border-top: 1px solid rgba(252, 80, 0, 0.55); box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45); color: #E4E4E4; } .sfa-consent__text { flex: 1 1 auto; min-width: 0; max-width: 900px; margin: 0; font-family: 'Nunito', sans-serif; font-size: 15px; line-height: 1.55; color: #E4E4E4; } .sfa-consent__link { color: #FC5000; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .sfa-consent__link:hover { color: #FFFFFF; } .sfa-consent__actions { flex: 0 0 auto; display: flex; gap: 10px; } .sfa-consent__btn { min-height: 44px; padding: 0 22px; border-radius: 6px; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .sfa-consent__btn--solid { background: #FC5000; color: #050505; border: 1px solid #FC5000; } .sfa-consent__btn--solid:hover { background: #FFFFFF; border-color: #FFFFFF; } .sfa-consent__btn--ghost { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.6); } .sfa-consent__btn--ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); } @media (max-width: 1024px) { .sfa-consent { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); } .sfa-consent__text { font-size: 14px; } .sfa-consent__actions { gap: 8px; } .sfa-consent__btn { flex: 1 1 0; padding: 0 8px; font-size: 14px; } } /* Ronda 30 — aviso a pantalla completa en Sobre mí, Proyectos y cada proyecto cuando las cookies no están aceptadas * (D-69). El contenido sigue en el HTML; el resto de la página queda inerte detrás del aviso. */ .sfa-gate { position: fixed; z-index: 99995; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 5, 5, 0.94); } html.sfa-gated, html.sfa-gated body { overflow: hidden !important; } html.sfa-gated .sfa-consent { display: none; } /* el aviso ya trae "Aceptar y continuar" */ .sfa-gate__panel { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 40px; background: #111111; border: 1px solid rgba(228, 228, 228, 0.16); border-radius: 12px; display: flex; flex-direction: column; gap: 18px; color: #E4E4E4; } .sfa-gate__title { margin: 0; font-family: 'Sora', sans-serif; font-size: 24px; line-height: 1.25; font-weight: 600; color: #FFFFFF; text-transform: none; letter-spacing: 0; } .sfa-gate__text { margin: 0; font-family: 'Nunito', sans-serif; font-size: 16px; line-height: 1.6; color: #E4E4E4; } .sfa-gate__alt { margin: 8px 0 0; padding-top: 22px; border-top: 1px solid rgba(228, 228, 228, 0.12); font-family: 'Nunito', sans-serif; font-size: 15px; line-height: 1.55; color: #9FA4A6; } /* Ronda 33: LinkedIn como alternativa, aparte */ .sfa-gate__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } /* Ronda 34: más aire entre el texto y los botones */ .sfa-gate__actions .sfa-consent__btn { flex: 1 1 180px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .sfa-gate .sfa-consent__link { align-self: flex-start; padding: 6px 0; } @media (max-width: 767px) { .sfa-gate__panel { padding: 28px 22px; } .sfa-gate__actions { margin-top: 12px; } .sfa-gate__title { font-size: 20px; } } /* Ronda 27 — página de política de privacidad (página 3, contenido HTML, sin Elementor). Columna de lectura de * 72 caracteres alineada al margen de 93 px; el padding superior deja libre el header transparente. */ .sfa-legal { max-width: 760px; padding: 200px 0 120px; color: #E4E4E4; font-family: 'Nunito', sans-serif; font-size: 17px; line-height: 1.7; } .sfa-legal h1 { margin: 8px 0 12px; font-family: 'Sora', sans-serif; font-size: clamp(36px, 5vw, 56px); line-height: 1.1; font-weight: 600; color: #FFFFFF; text-transform: none; } .sfa-legal h2 { margin: 48px 0 12px; font-family: 'Sora', sans-serif; font-size: 22px; line-height: 1.3; font-weight: 600; color: #FFFFFF; text-transform: none; } .sfa-legal p, .sfa-legal li { color: #E4E4E4; } .sfa-legal p { margin: 0 0 16px; } .sfa-legal ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; } .sfa-legal li { margin-bottom: 6px; } .sfa-legal a { color: #FC5000; text-decoration: underline; text-underline-offset: 3px; } .sfa-legal a:hover { color: #FFFFFF; } .sfa-legal code { font-size: 15px; background: rgba(228, 228, 228, 0.08); padding: 1px 6px; border-radius: 4px; color: #E4E4E4; } .sfa-legal__eyebrow { font-family: 'Sora', sans-serif; font-size: 14px; color: #9FA4A6; margin: 0; } .sfa-legal__date { font-size: 14px; color: #9FA4A6; } .sfa-legal__lead { font-size: 20px; line-height: 1.6; color: #FFFFFF !important; margin-bottom: 8px !important; } @media (max-width: 767px) { .sfa-legal { padding: 140px 0 80px; font-size: 16px; } .sfa-legal__lead { font-size: 18px; } } /* Ronda 27 — línea de consentimiento antes de "Enviar" en el formulario 3408. */ .sfa-form-consent { margin: 4px 0 12px; font-size: 14px; line-height: 1.5; color: #9FA4A6; } .sfa-form-consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .sfa-form-consent a:hover { color: #FC5000; } /* Ronda 27 — enlace a la política en la línea de copyright del footer (widget 8819caf de la plantilla 7459). */ .elementor-element-8819caf a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .elementor-element-8819caf a:hover { color: #FC5000; } /* Ronda 28 — la política de privacidad usa la plantilla de página del tema (.container de 1320 px), así que a * 1440 px el texto empezaba en 68 px y el logo en 93. Desde 1025 px toma el mismo margen lateral que el resto. */ @media (min-width: 1025px) { body.privacy-policy #pxl-main > .container { max-width: none; margin-left: 0; margin-right: 0; padding-left: var(--sfa-gutter); padding-right: var(--sfa-gutter); } } /* Ronda 29 — tabla de cookies de la política (se desplaza dentro de su caja en pantallas estrechas). */ .sfa-legal__table { overflow-x: auto; margin: 8px 0 20px; border: 1px solid rgba(228, 228, 228, 0.16); border-radius: 8px; } .sfa-legal table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.5; } .sfa-legal th, .sfa-legal td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(228, 228, 228, 0.12); color: #E4E4E4; } .sfa-legal th { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600; color: #FFFFFF; background: rgba(228, 228, 228, 0.05); } .sfa-legal tbody tr:last-child td { border-bottom: 0; } .sfa-legal td code { white-space: nowrap; } /* Ronda 36 — campo trampa del formulario: fuera de pantalla, sin ocupar espacio. */ .sfa-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }