/* Theme Name: Duratapas Ecológicas Theme URI: https://duratapas.com/ Author: Duratapas Ecológicas Author URI: https://duratapas.com/ Description: Tema oficial de Duratapas Ecológicas. Réplica del sitio de tapas plásticas para contenedores industriales de basura, lista para editarse con el editor de bloques de WordPress. Trae 14 secciones ya diseñadas (patrones) que se insertan con un clic: portada, datos clave, producto, resistencia con video, tablas de medidas, comparativa, proceso, sectores, sustentabilidad, galería, preguntas frecuentes, contacto y cierre. No necesitas tocar código: cambia textos e imágenes directamente en el editor. Version: 1.0.0 Requires at least: 6.2 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: duratapas Tags: block-patterns, full-width-template, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, business, industrial Duratapas Ecológicas — Tema de bloques para WordPress. Los estilos principales viven en assets/css/estilos.css */ /* ============================================================================= AJUSTES DEL TEMA DENTRO DE WORDPRESS Este archivo solo corrige detalles para que el diseño se vea igual de bien dentro de WordPress. Los estilos de diseño están en assets/css/estilos.css ============================================================================= */ /* --------------------------------------------------------------------------- 1. CONTENEDOR PRINCIPAL WordPress añade sus propias clases; aquí las alineamos con el diseño. --------------------------------------------------------------------------- */ .dt-main { display: block; } .dt-main > * { margin-block-start: 0; } /* Las secciones a ancho completo no deben tener padding lateral doble */ .dt-main > .alignfull { margin-inline: 0; max-inline-size: 100%; } /* --------------------------------------------------------------------------- 2. PORTADA (patrón 1) --------------------------------------------------------------------------- */ .dt-portada { gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); } .dt-portada__foto img { border-radius: var(--r-lg, 20px); box-shadow: var(--sh-3, 0 24px 48px -18px rgba(16,19,18,.28)); inline-size: 100%; block-size: auto; } .dt-portada__etiqueta { display: inline-flex; align-items: center; gap: .5rem; margin-block-start: 1rem; padding: .55rem 1rem; font-size: var(--fs-sm, .9rem); font-weight: 600; color: var(--dt-ink, #1A1D1B); background: #fff; border: 1px solid var(--dt-line, #E2E6E3); border-radius: var(--r-full, 999px); box-shadow: var(--sh-1, 0 1px 3px rgba(16,19,18,.06)); } /* En fondo oscuro, el eyebrow y la nota se aclaran */ .dt-seccion--oscura .dt-eyebrow, .dt-seccion--oscura .dt-nota { color: #9BDFA4; } /* --------------------------------------------------------------------------- 3. SECCIONES --------------------------------------------------------------------------- */ .dt-seccion { padding-block: clamp(3rem, 2rem + 5vw, 6rem); } .dt-seccion--gris { background: var(--dt-bg-soft, #F5F7F5); } .dt-seccion--oscura { background: var(--dt-bg-dark, #101312); color: rgba(255, 255, 255, .82); } .dt-seccion--oscura h1, .dt-seccion--oscura h2, .dt-seccion--oscura h3, .dt-seccion--oscura h4 { color: #fff; } .dt-seccion--oscura a { color: #9BDFA4; } .dt-eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin-block-end: .75rem; font-size: var(--fs-eyebrow, .78rem); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dt-green-700, #1E7A2E); } .dt-eyebrow::before { content: ""; inline-size: 1.75rem; block-size: 2px; background: currentColor; border-radius: 999px; } .dt-nota { font-size: var(--fs-sm, .9rem); color: var(--dt-muted-2, #616A66); } .dt-subtitulo { margin-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 1.25rem; } /* --------------------------------------------------------------------------- 4. DATOS CLAVE (patrón 2) --------------------------------------------------------------------------- */ .dt-stats .dt-stat__num { margin-block-end: .25rem; font-family: var(--font-display, sans-serif); font-size: var(--fs-stat, clamp(2.3rem, 1.5rem + 3vw, 3.6rem)); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--dt-ink, #1A1D1B); font-variant-numeric: tabular-nums lining-nums; } .dt-stats .dt-stat__lbl { margin: 0; font-size: var(--fs-xs, .8rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-muted-2, #616A66); } /* --------------------------------------------------------------------------- 5. TABLAS (patrón 5 y 6) --------------------------------------------------------------------------- */ .dt-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; } .dt-tabla table { inline-size: 100%; min-inline-size: 32rem; border: 1px solid var(--dt-line, #E2E6E3); border-radius: var(--r-md, 12px); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: var(--fs-sm, .9rem); } .dt-tabla thead th { padding: .85rem 1rem; background: var(--dt-dark, #14171A); color: #fff; font-family: var(--font-display, sans-serif); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: start; white-space: nowrap; } .dt-tabla tbody th, .dt-tabla tbody td { padding: .8rem 1rem; text-align: start; border-block-end: 1px solid var(--dt-line, #E2E6E3); } .dt-tabla tbody th { background: var(--dt-bg-soft, #F5F7F5); font-weight: 700; } .dt-tabla tbody tr:nth-child(even) td { background: #FAFBFA; } .dt-tabla tbody tr:last-child th, .dt-tabla tbody tr:last-child td { border-block-end: 0; } /* --------------------------------------------------------------------------- 6. CITA DESTACADA (patrón 6) --------------------------------------------------------------------------- */ .dt-destacado { margin-block: clamp(2rem, 1.5rem + 2vw, 3rem); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); background: var(--dt-green-050, #EEF8EF); border: 0; border-inline-start: 4px solid var(--dt-green, #44AE4F); border-radius: var(--r-md, 12px); } .dt-destacado p { margin: 0 0 .75rem; font-family: var(--font-display, sans-serif); font-size: clamp(1.1rem, 1rem + .8vw, 1.45rem); font-weight: 600; line-height: 1.5; color: var(--dt-ink, #1A1D1B); } .dt-destacado cite { display: block; font-size: var(--fs-sm, .9rem); font-weight: 700; font-style: normal; color: var(--dt-green-700, #1E7A2E); } /* --------------------------------------------------------------------------- 7. SELLOS DE CONFIANZA (bloque propio) --------------------------------------------------------------------------- */ .dt-sellos { display: flex; flex-wrap: wrap; gap: .6rem; margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0 0; padding: 0; list-style: none; } .dt-sello { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; font-size: var(--fs-sm, .9rem); font-weight: 600; line-height: 1.3; color: var(--dt-ink, #1A1D1B); background: #fff; border: 1px solid var(--dt-line, #E2E6E3); border-radius: var(--r-full, 999px); box-shadow: var(--sh-1, 0 1px 3px rgba(16,19,18,.06)); } .dt-sello span { color: var(--dt-green-700, #1E7A2E); font-weight: 800; } /* --------------------------------------------------------------------------- 8. DATOS DE CONTACTO (bloque propio) --------------------------------------------------------------------------- */ .dt-datos { display: grid; gap: 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; } .dt-datos li { display: flex; align-items: flex-start; gap: .85rem; font-size: var(--fs-sm, .9rem); line-height: 1.6; color: var(--dt-body, #454C48); } .dt-datos strong { display: block; color: var(--dt-ink, #1A1D1B); } .dt-datos a { color: var(--dt-green-700, #1E7A2E); font-weight: 600; text-decoration: none; } .dt-datos a:hover { text-decoration: underline; } .dt-datos__ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 2.4rem; block-size: 2.4rem; font-size: 1rem; background: var(--dt-green-050, #EEF8EF); border-radius: var(--r-full, 999px); } /* --------------------------------------------------------------------------- 9. VIDEO (patrón 4) --------------------------------------------------------------------------- */ .dt-video video { inline-size: 100%; border-radius: var(--r-lg, 20px); box-shadow: var(--sh-3, 0 24px 48px -18px rgba(16,19,18,.28)); } .dt-video figcaption { margin-block-start: .75rem; font-size: var(--fs-sm, .9rem); color: var(--dt-muted-2, #616A66); } /* --------------------------------------------------------------------------- 10. GALERÍA (patrón 10) --------------------------------------------------------------------------- */ .dt-galeria { gap: .75rem; } .dt-galeria .wp-block-image img { border-radius: var(--r-md, 12px); transition: scale var(--t-slow, .6s) var(--ease, cubic-bezier(.22,.61,.36,1)); } .dt-galeria .wp-block-image:hover img { scale: 1.04; } /* --------------------------------------------------------------------------- 11. PREGUNTAS FRECUENTES (patrón 11) --------------------------------------------------------------------------- */ .dt-faq { margin-block-end: .75rem; background: #fff; border: 1px solid var(--dt-line, #E2E6E3); border-radius: var(--r-md, 12px); box-shadow: var(--sh-1, 0 1px 3px rgba(16,19,18,.06)); overflow: hidden; } .dt-faq summary { padding: 1.1rem 1.25rem; font-family: var(--font-display, sans-serif); font-size: 1.02rem; font-weight: 700; line-height: 1.4; color: var(--dt-ink, #1A1D1B); cursor: pointer; list-style: none; position: relative; } .dt-faq summary::-webkit-details-marker { display: none; } .dt-faq summary::after { content: "+"; position: absolute; inset-inline-end: 1.25rem; font-size: 1.4rem; font-weight: 400; color: var(--dt-green-700, #1E7A2E); } .dt-faq[open] summary::after { content: "−"; } .dt-faq[open] summary { border-block-end: 1px solid var(--dt-line, #E2E6E3); } .dt-faq > *:not(summary) { padding-inline: 1.25rem; } .dt-faq > p:last-child { padding-block-end: 1.25rem; } /* --------------------------------------------------------------------------- 12. BOTONES DEL TEMA --------------------------------------------------------------------------- */ .dt-btn-wrap { margin-block: 1.25rem; } .dt-btn { display: inline-flex !important; align-items: center; gap: .5rem; padding: .85rem 1.6rem !important; font-family: var(--font-body, sans-serif); font-size: var(--fs-body, 1rem); font-weight: 700; line-height: 1.2; text-decoration: none; border-radius: var(--r-full, 999px); transition: transform var(--t-fast, .18s) var(--ease, cubic-bezier(.22,.61,.36,1)), background-color var(--t-fast, .18s) var(--ease, cubic-bezier(.22,.61,.36,1)), box-shadow var(--t-fast, .18s) var(--ease, cubic-bezier(.22,.61,.36,1)); } .dt-btn--lg { padding: 1rem 2rem !important; font-size: 1.05rem; } .dt-btn--wa { background: var(--dt-wa, #25D366) !important; color: #fff !important; box-shadow: var(--sh-2, 0 6px 18px -6px rgba(16,19,18,.14)); } .dt-btn--wa:hover { background: var(--dt-wa-dark, #128C4A) !important; transform: translateY(-2px); } /* --------------------------------------------------------------------------- 13. LOGO Y MENÚ --------------------------------------------------------------------------- */ .brand img, .custom-logo { inline-size: auto; max-block-size: 3rem; block-size: auto; } .brand__texto, .footer__logo-texto { display: block; font-family: var(--font-display, sans-serif); font-size: 1.35rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--dt-ink, #1A1D1B); } .brand__texto small, .footer__logo-texto small { display: block; margin-block-start: .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dt-green-700, #1E7A2E); } .footer__logo-texto { color: #fff; } .footer__logo-texto small { color: #9BDFA4; } /* El menú de WordPress llega como