/* Theme Name: Técnico Mérida Child Theme URI: https://tecnicomerida.com Description: Child theme de Twenty Twenty-Five para Técnico Mérida. Servicio técnico de reparación de electrodomésticos y electrónica en Mérida. Author: Técnico Mérida Author URI: https://tecnicomerida.com Template: twentytwentyfive Version: 26.5.10 Text Domain: tecnico-merida-child License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: full-site-editing, block-themes, child-theme */ /* * La identidad visual se gestiona desde theme.json. * Solo se conserva aquí CSS que no puede resolverse desde el editor de bloques * ni desde theme.json. Cada bloque está justificado. */ /* --------------------------------------------------------------------------- * SALTO DE LÍNEA — GLOBAL * Justificación: los navegadores y algunos temas aplican hyphens:auto o * word-break:break-all en viewports estrechos, partiendo palabras en mitad. * Se fuerza salto solo entre palabras (word-break:normal) y se desactiva * la separación silábica automática. overflow-wrap:break-word como último * recurso para URLs o cadenas sin espacios que realmente desborden. * ------------------------------------------------------------------------- */ *, *::before, *::after { word-break: normal; overflow-wrap: break-word; hyphens: none; } /* --------------------------------------------------------------------------- * BADGES / ETIQUETAS TIPO PÍLDORA * Justificación: se usan como dentro de wp:html. No existe bloque * nativo de Gutenberg para etiquetas pill. No reemplazable desde theme.json. * ------------------------------------------------------------------------- */ .tp-badge { display: inline-block; padding: 0.25rem 0.75rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; border-radius: 999px; background-color: var(--wp--preset--color--background-soft); color: var(--wp--preset--color--text-medium); } .tp-badge-green { background-color: var(--wp--preset--color--whatsapp-soft); color: var(--wp--preset--color--whatsapp-dark); } .tp-badge-blue { background-color: var(--wp--preset--color--primary-blue-soft); color: var(--wp--preset--color--primary-blue-dark); } .tp-badge-cyan { background-color: var(--wp--preset--color--cyan-soft); color: var(--wp--preset--color--cyan); } /* --------------------------------------------------------------------------- * ICON BOXES * Justificación: se usan como
dentro de wp:html para íconos con fondo * de color. No existe bloque nativo equivalente. No reemplazable desde editor. * ------------------------------------------------------------------------- */ .tp-icon-box { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--wp--custom--border-radius--card, 18px); background-color: var(--wp--preset--color--background-soft); font-size: 1.5rem; line-height: 1; } .tp-icon-blue { background-color: var(--wp--preset--color--primary-blue-soft); color: var(--wp--preset--color--primary-blue); } .tp-icon-cyan { background-color: var(--wp--preset--color--cyan-soft); color: var(--wp--preset--color--cyan); } .tp-icon-green { background-color: var(--wp--preset--color--whatsapp-soft); color: var(--wp--preset--color--whatsapp-dark); } .tp-icon-red { background-color: var(--wp--preset--color--red-soft); color: var(--wp--preset--color--red); } .tp-icon-sky { background-color: var(--wp--preset--color--sky-soft); color: var(--wp--preset--color--sky); } /* --------------------------------------------------------------------------- * TRANSICIONES DE BOTONES * Justificación: theme.json no soporta la propiedad CSS `transition`. * Este selector es específico a botones de WordPress y no afecta selectores * globales. La transición mejora la experiencia sin alterar colores ni layout. * ------------------------------------------------------------------------- */ .wp-element-button, .wp-block-button__link { transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } /* --------------------------------------------------------------------------- * IMÁGENES ILUSTRATIVAS DE CARDS (servicios, beneficios, contacto) * Justificación: wp:image no expone la propiedad `margin: auto` como opción * de alineación horizontal dentro de un layout flow. Las clases tec-svc-img, * tec-ben-img y tec-con-img son identificadores propios del tema. * ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * CARD DE DIRECCIÓN — ENLACE COMPLETO A GOOGLE MAPS * Justificación: wp:group no soporta tagName:"a". Se usa el patrón estándar * de enlace estirado (stretched link): absoluto sobre la card relativa. * El aria-label garantiza accesibilidad. z-index:1 queda por debajo de cualquier * elemento interactivo real dentro de la card si se añadiera en el futuro. * ------------------------------------------------------------------------- */ .tec-con-card-maps { position: relative; } .tec-con-maps-link { position: absolute; inset: 0; z-index: 1; border-radius: 12px; cursor: pointer; } .tec-con-card-maps:hover { box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12); border-color: #2563EB !important; transition: box-shadow 0.15s ease, border-color 0.15s ease; } figure.tec-svc-img, figure.tec-ben-img, figure.tec-con-img { margin-left: auto; margin-right: auto; text-align: center; } /* --------------------------------------------------------------------------- * SECCIONES DE PÁGINA — MARGIN-TOP * Justificación: Gutenberg aplica margin-block-start (block-gap) a todos los * hijos directos de .wp-site-blocks. Las secciones ya usan padding-top/bottom * propio, por lo que el margin extra genera doble espaciado no deseado. * Se cero solo en hijos directos; los gaps internos de cada sección no se ven * afectados porque no son hijos directos de .wp-site-blocks. * ------------------------------------------------------------------------- */ .wp-site-blocks > .wp-block-group, .wp-site-blocks > header.wp-block-group { margin-block-start: 0; } /* --------------------------------------------------------------------------- * LOGO DEL HEADER * Justificación: wp:image con sizeSlug:full no limita el tamaño en px. * La clase tec-header-logo es propia del tema y no afecta otros bloques. * ------------------------------------------------------------------------- */ .tec-header-logo img { width: 56px; height: auto; } /* --------------------------------------------------------------------------- * GAP DEL GRUPO TÍTULO + TAGLINE EN EL HEADER * Justificación: Gutenberg aplica --wp--style--block-gap al contenedor flex * dinámico (wp-container-core-group-is-layout-*), que no es un selector * estable. Se usa :has(.wp-block-site-title) para apuntar al grupo vertical * que contiene título y tagline sin depender de clases generadas. * ------------------------------------------------------------------------- */ header.wp-block-group .is-vertical.is-layout-flex:has(.wp-block-site-title) { gap: 8px; } /* --------------------------------------------------------------------------- * GRID DE ICONOS DEL HERO * Causa raíz: Gutenberg aplica height:auto !important a .size-full img, * rompiendo height:100% en la imagen. Solución: usar flex:1 en figure e img * para que la altura provenga del algoritmo flex, no de herencia CSS. * El column debe ser flex-direction:column + align-items:stretch para que * la figure reciba altura real sin depender de height:100%. * ------------------------------------------------------------------------- */ /* Columna derecha del hero: máx. 33% en escritorio, oculta en móvil. */ @media (min-width: 782px) { .tec-hero-col { max-width: 33%; } } @media (max-width: 781px) { .tec-hero-col { display: none !important; } } .tec-hero-icons-grid { display: flex !important; flex-direction: column !important; aspect-ratio: 1 / 1; gap: 1rem; box-sizing: border-box; } /* Cada fila ocupa la mitad del alto, ancho completo y estira sus hijos */ .tec-hero-icons-grid > .wp-block-columns { flex: 1 !important; width: 100% !important; min-height: 0; margin: 0 !important; gap: 1rem; align-items: stretch !important; } /* Cada celda es flex vertical y estira la figure */ .tec-hero-icons-grid .wp-block-column { display: flex !important; flex-direction: column !important; align-items: stretch !important; min-height: 0; } /* Figure toma toda la altura disponible de la celda */ .tec-hero-icons-grid .wp-block-image { flex: 1; display: flex !important; flex-direction: column !important; margin: 0 !important; min-height: 0; } /* flex:1 evita conflicto con height:auto !important de Gutenberg en .size-full img */ .tec-hero-icons-grid .wp-block-image img { flex: 1; width: 100% !important; min-height: 0; object-fit: contain; display: block; }