/* Theme Name: 3 Actos — tema hijo Theme URI: https://3actos.cl Description: Tema hijo de Divi para 3 Actos. Contiene la hoja de sistema del sitio. Author: 3 Actos Author URI: https://3actos.cl Template: Divi Version: 1.0 Text Domain: 3actos-child */ /* ========================================================================== 3 ACTOS · HOJA DE SISTEMA Versión 1.0 · extraída de las doce páginas maquetadas -------------------------------------------------------------------------- QUÉ ES ESTO Los átomos compartidos por todo el sitio: color, retícula, tipografía, botones, enlaces, header, footer y barra de capítulo. Esto es idéntico en las doce páginas y NO cambia entre ellas. La composición de cada página —qué bloques hay, en qué orden y con qué ritmo— es libre y vive en el CSS propio de esa página. DÓNDE VA EN WORDPRESS En el archivo style.css del TEMA HIJO de Divi. Nunca en el tema padre: una actualización de Divi lo borraría. Divi → Opciones del tema → CSS personalizado también funciona, pero el tema hijo es más limpio y permite versionarlo. ANTES DE PEGARLO 1. Crear el tema hijo. 2. Alojar Figtree e Inter en el servidor propio, en formato woff2, y reemplazar el bloque @font-face de abajo. NO cargarlas desde Google Fonts: transfiere la IP del visitante a un tercero y contradice la política de privacidad. El plugin OMGF lo hace automáticamente. 3. Header, footer y franja de cierre van como MÓDULOS GLOBALES de la biblioteca de Divi, para que un cambio se propague a todas las páginas. ========================================================================== */ /* -------------------------------------------------------------------------- /* -------------------------------------------------------------------------- 1 · TIPOGRAFÍAS AUTOALOJADAS Dos familias variables, un archivo cada una, en woff2 y recortadas a latín extendido. No se cargan desde Google Fonts: eso transferiría la IP del visitante a un tercero y obligaría a declararlo en la política de privacidad. -------------------------------------------------------------------------- */ @font-face{ font-family:'Figtree'; src:url('./fonts/figtree-variable.woff2') format('woff2'); font-weight:300 900; font-style:normal; font-display:swap; } @font-face{ font-family:'Inter'; src:url('./fonts/inter-variable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } /* -------------------------------------------------------------------------- 2 · TOKENS Cambiar un color acá lo cambia en todo el sitio. No escribir valores hexadecimales sueltos en ningún módulo de Divi. -------------------------------------------------------------------------- */ :root{ /* Neutros */ --ink:#1A1D21; /* texto principal, superficie de cierre y footer */ --paper:#FFFFFF; /* fondo por defecto */ --paper-2:#F7F6F3; /* hueso · superficie alterna de sección */ --paper-3:#EDEBE7; /* hueso oscuro · fondos de imagen y marcos */ --gray:#5E6166; /* texto secundario · 6.22 sobre blanco ✓ */ --gray-2:#6E7276; /* texto terciario · 4.85 sobre blanco ✓ — mínimo */ --rule:#E1DFDA; /* filetes sobre claro */ --rule-inv:rgba(255,255,255,.18); /* filetes sobre tinta */ /* Naranja · tres valores, cuatro registros de uso */ --acc:#FF5C00; /* superficie y botón. Con TINTA encima: 5.46 ✓ NUNCA con texto blanco encima: 3.10 ✗ */ --acc-ink:#C74600; /* texto, rótulos y flechas · 4.88 sobre blanco ✓ */ --acc-deep:#E85200; /* hover del botón */ /* Los otros dos registros no son variables: el resalte tipo destacador usa rgba(255,92,0,.22) y el lavado de hover rgba(255,92,0,.07). */ /* Retícula */ --max:1240px; /* ancho máximo del contenedor */ --gut:32px; /* canaleta de la retícula de 12 columnas */ } /* -------------------------------------------------------------------------- 3 · BASE Y RETÍCULA -------------------------------------------------------------------------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink);background:var(--paper); font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased; } .wrap{max-width:var(--max);margin:0 auto;padding:0 40px} .g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)} /* La retícula se usa asimétrica: rótulo de sección en las columnas 1–3 o 1–4, contenido desplazado a partir de la 5. La mancha de texto nunca va centrada: el vacío de la izquierda es lo que da aire sin necesidad de gráfica. */ /* -------------------------------------------------------------------------- 4 · TIPOGRAFÍA Figtree para titulares y rótulos, Inter para párrafos y texto pequeño. El interletrado negativo en titulares es parte del carácter: no quitarlo. -------------------------------------------------------------------------- */ h1,h2,h3,h4,.fig{font-family:'Figtree',system-ui,sans-serif;letter-spacing:-.028em} /* Titulares grandes bajan a -.038 / -.042em. Ver el CSS de cada página. */ .lead{font-weight:300;font-size:21px;line-height:1.5} .meta{font-weight:500;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)} /* Palabra destacada en titulares. Se usa donde la palabra ES el argumento, no como adorno: dos o tres veces por página como máximo. */ .hl{font-style:normal;color:var(--acc)} /* Resalte tipo destacador, para la línea de conclusión de un bloque. */ .fig em{font-style:normal;box-shadow:inset 0 -.32em 0 rgba(255,92,0,.22)} /* -------------------------------------------------------------------------- 5 · ENLACES, BOTONES Y ESTADOS -------------------------------------------------------------------------- */ a{color:inherit;text-decoration:none} /* El foco visible no se elimina jamás. Es la falla de accesibilidad más común y la más fácil de evitar. */ a:focus-visible,button:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--acc-ink);outline-offset:3px;border-radius:1px } .inv a:focus-visible,.orange a:focus-visible{outline-color:#fff} /* Botón primario. Uno solo por página, salvo que haya una razón. */ .btn{display:inline-block;font-family:inherit;font-weight:600;font-size:16px; border:0;border-radius:2px;padding:15px 27px;transition:.18s;cursor:pointer} .btn-p{background:var(--acc);color:var(--ink)} .btn-p:hover{background:var(--acc-deep)} /* Enlace de navegación autónomo, con flecha. */ .arrow{font-weight:600;font-size:16px;color:var(--acc-ink);display:inline-flex; gap:8px;align-items:center;transition:color .18s} .arrow span{transition:.18s;display:inline-block} .arrow:hover{color:var(--ink)} .arrow:hover span{transform:translateX(5px)} .inv .arrow{color:var(--acc)}.inv .arrow:hover{color:#fff} .orange .arrow{color:var(--ink)}.orange .arrow:hover{color:#fff} /* Enlace dentro de un párrafo: siempre subrayado. El color solo no basta. */ .enlace{color:var(--acc-ink);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:3px;transition:color .18s} .enlace:hover{color:var(--ink);text-decoration-thickness:2px} .inv .enlace{color:var(--acc)}.inv .enlace:hover{color:#fff} /* -------------------------------------------------------------------------- 6 · HEADER · módulo global de Divi -------------------------------------------------------------------------- */ .hdr{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94); backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)} .hdr .in{max-width:var(--max);margin:0 auto;padding:20px 40px;display:flex;align-items:center} /* Logotipo provisional: el texto «3 ACTOS». Mismo tratamiento en header y footer, solo cambia el tamaño. Reemplazable por SVG sin tocar estructura. */ .logo{font-family:'Figtree',sans-serif;font-weight:800;font-size:24px; letter-spacing:-.03em;line-height:1} .nav{display:flex;gap:30px;margin-left:auto;align-items:center;font-weight:500;font-size:15px} .nav a{padding:4px 0;border-bottom:2px solid transparent} .nav a:hover,.nav a.on{border-color:var(--acc)} .nav .btn{padding:11px 20px;font-size:14.5px;border-bottom:0} /* Submenú de Servicios. Los dos pseudoelementos son un puente invisible que cubre el aire entre el enlace y el desplegable: sin ellos, el cursor pierde el hover al bajar y el menú se cierra antes de que se pueda hacer clic. */ .nav .sw{position:relative} .nav .sw::after{content:"";position:absolute;left:-20px;right:-20px;top:100%;height:18px} .nav .sub{position:absolute;top:100%;left:-20px;margin-top:14px;background:var(--paper); border:1px solid var(--rule);padding:10px 0;min-width:300px;display:none; box-shadow:0 10px 28px rgba(0,0,0,.07)} .nav .sub::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px} .nav .sw:hover .sub,.nav .sw:focus-within .sub{display:block} .nav .sub a{display:block;padding:9px 20px;border-bottom:0;font-size:15px} .nav .sub a:hover{color:var(--acc-ink);border-bottom:0} .nav .sub a.central{font-weight:700} /* el Acompañamiento, destacado por peso */ /* Menú móvil a pantalla completa. Lleva «Inicio» como primera entrada y el logotipo clicable: sin eso no hay forma de volver a la portada. */ .burger{display:none;margin-left:auto;background:none;border:0; font:500 15px/1 'Inter',sans-serif;color:var(--ink);cursor:pointer;padding:14px 0} .mob{position:fixed;inset:0;background:var(--paper);z-index:60;padding:22px 24px 60px; overflow:auto;display:none;flex-direction:column} .mob.open{display:flex} .mob .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px} .mob nav{display:flex;flex-direction:column} .mob nav a{font-family:'Figtree',sans-serif;font-weight:700;font-size:25px; letter-spacing:-.03em;padding:13px 0;transition:color .18s} .mob .subm{display:flex;flex-direction:column;padding-left:16px; border-left:1px solid var(--rule);margin:6px 0 14px} .mob .subm a{font-family:'Inter',sans-serif;font-weight:400;font-size:17px; line-height:1.35;padding:10px 0;color:var(--gray)} .mob .subm a.central{font-weight:600;color:var(--ink)} .mob nav a:hover,.mob .subm a:hover{color:var(--acc-ink)} .mob nav a.on,.mob .subm a.on{color:var(--acc-ink)} .mob .btn{margin-top:36px;text-align:center} /* -------------------------------------------------------------------------- 7 · BARRA DE CAPÍTULO Filete de 1 px en tinta y tres rótulos alineados a la línea base. Sin número: numerar las páginas de servicio crearía una secuencia que la estructura de oferta niega. La Home es la única que usa ACTO I / II / III. -------------------------------------------------------------------------- */ .chap{padding:34px 0 0} .chap .in{grid-column:1 / span 12;display:flex;align-items:baseline;gap:26px; border-top:1px solid var(--ink);padding-top:16px;flex-wrap:wrap} .chap .n{font-family:'Figtree',sans-serif;font-weight:800;font-size:13px; letter-spacing:.2em;color:var(--acc-ink);white-space:nowrap} .chap .t{font-family:'Figtree',sans-serif;font-weight:600;font-size:19px; color:var(--gray);letter-spacing:-.015em} .chap .f{margin-left:auto;font-family:'Figtree',sans-serif;font-weight:600; font-size:13px;color:var(--gray-2);letter-spacing:.1em} /* Sobre superficie naranja hay que recalcular el contraste: no se hereda. */ .orange .chap .in{border-top-color:rgba(26,29,33,.4)} .orange .chap .n{color:var(--ink)} .orange .chap .t{color:rgba(26,29,33,.72)} .orange .chap .f{color:rgba(26,29,33,.5)} /* Migas de pan. Solo en las cuatro páginas de servicio: las de primer nivel no llevan, porque producen una jerarquía falsa. */ .crumb{grid-column:1 / span 12;font-size:14px;color:var(--gray-2);margin-bottom:26px} .crumb a:hover{color:var(--acc-ink)} /* -------------------------------------------------------------------------- 8 · INTERLUDIO FOTOGRÁFICO Banda a ancho completo entre bloques. En móvil pasa a 16:9. -------------------------------------------------------------------------- */ .inter .band{width:100%;aspect-ratio:21/7;object-fit:cover;display:block;filter:grayscale(.25)} .inter .cap{padding:12px 40px 0;max-width:var(--max);margin:0 auto; font-size:13.5px;color:var(--gray-2)} /* -------------------------------------------------------------------------- 9 · CIERRE Y FOOTER · módulos globales de Divi El telón: superficie en tinta que contiene la franja de conversión. -------------------------------------------------------------------------- */ .close{background:var(--ink);color:#fff} .close .chap .in{border-top-color:var(--rule-inv)} .close .chap .n{color:var(--acc)} .close .chap .t{color:rgba(255,255,255,.6)} .close .chap .f{color:rgba(255,255,255,.38)} .cta{padding:70px 0 92px} .cta .in{grid-column:1 / span 8} .cta h2{font-weight:700;font-size:clamp(34px,4.8vw,62px);line-height:1.04; letter-spacing:-.038em;max-width:17ch} .cta p{margin-top:26px;color:rgba(255,255,255,.78);max-width:52ch} .cta p+p{margin-top:16px} .cta .b{margin-top:34px;display:flex;gap:26px;align-items:center;flex-wrap:wrap} .cta .nb{grid-column:10 / span 3;text-align:right;font-size:14px; color:rgba(255,255,255,.5);line-height:1.55;align-self:end} .ftr{padding:58px 0 40px;border-top:1px solid var(--rule-inv)} .ftr .c1{grid-column:1 / span 3} .ftr .c2{grid-column:5 / span 3} .ftr .c3{grid-column:8 / span 2} .ftr .c4{grid-column:10 / span 3} .ftr .logo{color:#fff;font-size:32px;display:inline-block} .ftr h5{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600; color:rgba(255,255,255,.5);margin-bottom:15px} .ftr ul{list-style:none;font-size:16px;line-height:2;color:rgba(255,255,255,.85)} .ftr ul a:hover{color:var(--acc)} .ftr .cafe{font-family:'Figtree',sans-serif;font-weight:600;font-size:18px; letter-spacing:-.02em;color:#fff;margin-bottom:12px} .ftr .dir{color:rgba(255,255,255,.72);line-height:1.55;margin-top:10px;font-size:15.5px} .ftr .sig{font-family:'Figtree',sans-serif;font-weight:600;font-size:19px; margin-top:20px;letter-spacing:-.02em} .ftr .sig i{font-style:normal;color:var(--acc)} .legal{grid-column:1 / -1;margin-top:50px;padding-top:22px; border-top:1px solid var(--rule-inv);display:flex;justify-content:space-between; font-size:14px;color:rgba(255,255,255,.55);flex-wrap:wrap;gap:16px} .legal a{transition:color .18s} .legal a:hover{color:var(--acc)} /* -------------------------------------------------------------------------- 10 · PUNTO DE CORTE ÚNICO · 1000 px Por debajo, la retícula pasa de 12 a 6 columnas y todo se apila en el orden del escritorio. Única excepción del sitio: en Contacto, «Qué pasa después» se intercala entre el último campo y el botón de envío. -------------------------------------------------------------------------- */ @media(max-width:1000px){ .wrap,.hdr .in,.inter .cap{padding-left:24px;padding-right:24px} .hdr .in{padding-top:16px;padding-bottom:16px} .nav{display:none} .burger{display:block} .g{grid-template-columns:repeat(6,1fr);gap:20px} .chap .in{gap:8px} .chap .f{margin-left:0;width:100%} .inter .band{aspect-ratio:16/9} .cta .in,.cta .nb,.ftr .c1,.ftr .c2,.ftr .c3,.ftr .c4,.crumb,.chap .in{grid-column:1 / span 6} .cta .nb{text-align:left;margin-top:26px} .ftr .c2,.ftr .c3,.ftr .c4{margin-top:32px} } /* -------------------------------------------------------------------------- 11 · MOVIMIENTO REDUCIDO Para quienes marcan esa preferencia en su sistema operativo. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} html{scroll-behavior:auto} } /* ========================================================================== CAPA DE COMPATIBILIDAD CON DIVI Divi impone su color de titulares y de enlaces con selectores más fuertes que los de esta hoja. Este bloque devuelve el control al sistema. Va al final del archivo: el orden importa. ========================================================================== */ .et_pb_code h1,.et_pb_code h2,.et_pb_code h3,.et_pb_code h4{ font-family:'Figtree',system-ui,sans-serif; color:var(--ink); padding:0 } .et_pb_code a{color:inherit!important;text-decoration:none} .et_pb_code p{margin:0} .et_pb_code ul{list-style:none;padding:0;margin:0} .et_pb_code .hl{color:var(--acc)!important} .et_pb_code .crumb a:hover{color:var(--acc-ink)!important} .et_pb_code .btn-p{background:var(--acc);color:var(--ink)!important} .et_pb_code .btn-p:hover{background:var(--acc-deep)} .et_pb_code .arrow{color:var(--acc-ink)!important} .et_pb_code .arrow:hover{color:var(--ink)!important} .et_pb_code .enlace{color:var(--acc-ink)!important;text-decoration:underline} .et_pb_code .enlace:hover{color:var(--ink)!important} .et_pb_code .inv .arrow,.et_pb_code .inv .enlace{color:var(--acc)!important} .et_pb_code .inv .arrow:hover,.et_pb_code .inv .enlace:hover{color:#fff!important} .et_pb_code .orange .arrow, .et_pb_code .orange .enlace{color:var(--ink)!important} .et_pb_code .orange .arrow:hover{color:#fff!important} .et_pb_code .ftr ul a:hover,.et_pb_code .legal a:hover{color:var(--acc)!important} /* ========================================================================== FIN DE LA HOJA DE SISTEMA Todo lo demás —qué bloques tiene cada página, en qué orden y con qué ritmo— es composición propia y vive en el CSS de esa página. ========================================================================== */ /* 13 · CONTENEDORES DE DIVI Todo el sitio se compone dentro de módulos de Código: secciones, filas y columnas de Divi son solo envoltorios y no deben aportar ni relleno ni ancho propio. El ancho lo controla .wrap, del sistema. Si en el futuro se usa un módulo nativo de Divi, habrá que acotar esto. */ .et_pb_section, .et_pb_row, .et_pb_column, .et_pb_row_inner, .et_pb_column_inner{ padding:0 !important; margin:0 !important; width:100% !important; max-width:100% !important; } /* 14 · MENÚ · excepciones a la capa de compatibilidad de Divi La regla .et_pb_code a{color:inherit!important} mata los hover del menú. Acá se devuelven uno por uno, y se ensancha el desplegable para que los dos títulos largos no se partan en dos líneas. */ .et_pb_code .nav .sub{min-width:300px} .et_pb_code .nav .sub a{line-height:1.35} .et_pb_code .nav .sub a:hover{color:var(--acc-ink) !important} .et_pb_code .nav a:hover, .et_pb_code .nav a.on{border-color:var(--acc)} .et_pb_code .mob .subm a{color:var(--gray) !important} .et_pb_code .mob .subm a.central{color:var(--ink) !important} .et_pb_code .mob nav a:hover, .et_pb_code .mob .subm a:hover, .et_pb_code .mob nav a.on, .et_pb_code .mob .subm a.on{color:var(--acc-ink) !important} /* 15 · TITULARES SOBRE SUPERFICIE OSCURA La regla 12 fija los titulares en tinta para ganarle a Divi. Sobre la franja de cierre y el footer —fondo tinta— eso los vuelve invisibles. Acá se recupera el blanco, y se fuerza la alineación a la izquierda: el sistema nunca centra titulares. */ .et_pb_code .close h1, .et_pb_code .close h2, .et_pb_code .close h3, .et_pb_code .close h4, .et_pb_code .inv h1, .et_pb_code .inv h2, .et_pb_code .inv h3, .et_pb_code .inv h4{ color:#fff !important; } .et_pb_code h1, .et_pb_code h2, .et_pb_code h3, .et_pb_code h4{ text-align:left; } /* 16 · AIRE BAJO EL TITULAR DE LA FRANJA DE CIERRE El titular es de hasta 62 px; 26 px de separación lo dejan pegado al párrafo. Se suman 34 px, que da 60 en total. Aplica a las doce páginas. */ .et_pb_code .cta h2{margin-bottom:34px} /* 17 · SUBMENÚ El hover lo resuelve el CSS, para que el menú funcione aunque el script falle. Se elimina :focus-within, que era la causa del panel que quedaba abierto de forma permanente tras hacer clic. El teclado y el cierre con Escape los aporta el script del encabezado mediante la clase .open. */ .hdr .nav .sw:hover .sub, .hdr .nav .sw.open .sub{display:block} /* 18 · SUBMENÚ SIN HUECO El panel colgaba 14 px más abajo del enlace y ese aire se cubría con un pseudoelemento invisible. Dentro de Divi ese puente no recibe el puntero y el menú se cierra al bajar. Se elimina el hueco: .sw ocupa todo el alto de la barra y el panel arranca justo en su borde inferior. */ .hdr .nav .sw{display:flex;align-items:center;align-self:stretch} .hdr .nav .sub{top:100%;margin-top:0} /* 19 · APILADO Divi asigna z-index:9 a sus filas. Como el cuerpo de la página se dibuja después del encabezado, esa capa —aunque sea transparente— queda encima del desplegable y captura el puntero: el panel se ve pero no se puede tocar. Al devolver el apilado a automático, manda el z-index:30 de .hdr. Ningún módulo nativo de Divi depende de esto en este sitio. */ .et_pb_section, .et_pb_row, .et_pb_column, .et_pb_row_inner, .et_pb_column_inner{ z-index:auto !important; } /* 20 · APARICIÓN DEL SUBMENÚ display:none no admite transición, así que el panel pasa a ocultarse con visibility y opacidad. Baja 8 px y se desvanece, en el mismo tiempo que el resto de los estados del sitio. visibility se retrasa al cerrar para que el desvanecido alcance a verse; al abrir es inmediata. El bloque 11 ya lo anula para quien pide movimiento reducido. */ .hdr .nav .sub{ display:block; opacity:0; visibility:hidden; transform:translateY(-8px); transform-origin:top center; transition:opacity .16s ease, transform .2s cubic-bezier(.2,.7,.3,1), visibility 0s .2s; } .hdr .nav .sw:hover .sub, .hdr .nav .sw.open .sub{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .16s ease, transform .2s cubic-bezier(.2,.7,.3,1), visibility 0s; } /* -------------------------------------------------------------------------- 21 · EL ENCABEZADO FIJO VA POR ENCIMA El bloque 19 puso z-index:auto en todas las secciones para arreglar el submenú, y de paso anuló el que Divi le da al encabezado pegajoso. Estas reglas devuelven el orden, pero solo al encabezado: el resto del sitio sigue con la corrección del submenú intacta. -------------------------------------------------------------------------- */ .et-l--header{position:relative;z-index:9999} .et_pb_section.et_pb_sticky, .et_pb_section.et_pb_sticky_module{z-index:9999 !important} .hdr{z-index:9999} .conv em{ font-style:normal; box-shadow:inset 0 -.32em 0 rgba(255,92,0,.22); }