/* Theme Name: Wellness Digital Theme URI: https://mywellnessdigital.com/ Author: MyWellnessDigital Author URI: https://mywellnessdigital.com/ Description: Tema WordPress a medida para blogs de bienestar digital, hábitos, productividad consciente y mindfulness. Diseño calmado, tipografía legible, TOC automático, "related posts" y bloques de anuncios AdSense integrados como áreas de widgets para máxima compatibilidad con las políticas de Google AdSense. Version: 1.0.2 Requires at least: 6.0 Requires PHP: 7.4 Tested up to: 6.6 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: wellnessdigital Tags: blog, custom-background, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, right-sidebar, one-column, two-columns, wide-blocks */ /* ========================================================================== 1. VARIABLES / DESIGN TOKENS ========================================================================== */ :root{ --wd-sage: #4f7566; --wd-sage-dark: #375247; --wd-sage-light: #e8f0ec; --wd-cream: #faf7f2; --wd-cream-2: #f2ede3; --wd-ink: #23281f; --wd-ink-soft: #565f54; --wd-line: #e4ddce; --wd-accent: #d98e6b; --wd-white: #ffffff; --wd-radius: 16px; --wd-radius-sm: 10px; --wd-shadow: 0 4px 20px rgba(35,40,31,0.06); --wd-shadow-hover: 0 10px 30px rgba(35,40,31,0.10); --wd-max: 1180px; --wd-content-max: 760px; --wd-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --wd-font-head: "Fraunces", Georgia, "Times New Roman", serif; } /* Modo oscuro — se activa añadiendo la clase "wd-dark" a (lo hace assets/js/main.js, con memoria en localStorage) */ html.wd-dark{ --wd-sage: #7fa290; --wd-sage-dark: #a9c3b5; --wd-sage-light: #24322b; --wd-cream: #191d16; --wd-cream-2: #222720; --wd-ink: #eef1e9; --wd-ink-soft: #a9b0a0; --wd-line: #363c30; --wd-accent: #e3a684; --wd-white: #22271f; --wd-shadow: 0 4px 20px rgba(0,0,0,0.28); --wd-shadow-hover: 0 10px 30px rgba(0,0,0,0.38); } html.wd-dark img:not([src*=".svg"]){ filter: brightness(.92) contrast(1.02); } html.wd-dark{ color-scheme: dark; } /* ========================================================================== 2. RESET BÁSICO ========================================================================== */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--wd-cream); color: var(--wd-ink); font-family: var(--wd-font-body); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* red de seguridad: nada puede forzar scroll horizontal ni "cortar" contenido en móvil */ } img{ max-width:100%; height:auto; display:block; border-radius: var(--wd-radius-sm); } a{ color: var(--wd-sage-dark); text-decoration:none; overflow-wrap: anywhere; } a:hover{ color: var(--wd-accent); } h1,h2,h3,h4{ font-family: var(--wd-font-head); line-height:1.2; color: var(--wd-ink); font-weight:600; margin: 1.4em 0 .5em; overflow-wrap: anywhere; } h1{ font-size: clamp(2rem, 4vw, 2.8rem); } h2{ font-size: clamp(1.4rem, 3vw, 1.9rem); } h3{ font-size: 1.3rem; } p{ margin: 0 0 1.2em; overflow-wrap: anywhere; } ul, ol{ padding-left: 1.3em; } .screen-reader-text{ position:absolute!important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; } /* ========================================================================== 3. LAYOUT ========================================================================== */ .wd-container{ max-width: var(--wd-max); margin:0 auto; padding: 0 20px; } .wd-layout{ display:grid; grid-template-columns: minmax(0,1fr) 336px; gap: 48px; align-items:start; } @media (max-width: 960px){ .wd-layout{ grid-template-columns: 1fr; } } /* ========================================================================== 4. HEADER ========================================================================== */ .wd-site-header{ background: var(--wd-white); border-bottom:1px solid var(--wd-line); position: sticky; top:0; z-index:100; } .wd-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding: 14px 0; } .wd-logo{ display:flex; align-items:center; gap:10px; font-family: var(--wd-font-head); font-size:1.3rem; font-weight:700; color: var(--wd-ink); } .wd-logo img{ height:42px; width:auto; border-radius:0; } .wd-logo-dark-img{ display:none; } html.wd-dark .wd-logo > .custom-logo-link:not(.wd-logo-dark-img){ display:none; } html.wd-dark .wd-logo-dark-img{ display:block; } .wd-primary-nav ul{ list-style:none; display:flex; gap:26px; margin:0; padding:0; align-items:center; } .wd-primary-nav a{ color: var(--wd-ink); font-weight:600; font-size:.95rem; } .wd-primary-nav li{ position:relative; } .wd-primary-nav ul ul{ display:none; position:absolute; top:100%; left:0; background:var(--wd-white); flex-direction:column; min-width:300px; padding:10px 0; border-radius: var(--wd-radius-sm); box-shadow: var(--wd-shadow-hover); border:1px solid var(--wd-line); z-index:200; } .wd-primary-nav li:hover > ul{ display:flex; } .wd-primary-nav ul ul a{ padding:11px 20px; display:flex; align-items:center; gap:10px; font-weight:500; line-height:1.3; white-space:nowrap; min-height:22px; } .wd-primary-nav ul ul li{ width:100%; } .wd-primary-nav ul ul a:hover{ background: var(--wd-sage-light); color: var(--wd-sage-dark); } .wd-menu-icon{ display:inline-flex; align-items:center; justify-content:center; width:22px; flex-shrink:0; font-size:1rem; line-height:1; } .wd-menu-label{ line-height:1.3; } .wd-menu-toggle{ display:none; background:none; border:1px solid var(--wd-line); border-radius:8px; padding:8px 10px; cursor:pointer; } .wd-dark-toggle{ background:none; border:1px solid var(--wd-line); border-radius:999px; height:38px; padding:0 14px 0 10px; display:flex; align-items:center; gap:7px; cursor:pointer; font-size:.85rem; font-weight:600; color: var(--wd-ink); flex-shrink:0; transition: background .2s ease; white-space:nowrap; } .wd-dark-toggle:hover{ background: var(--wd-sage-light); } .wd-dark-toggle .wd-dark-icon-moon{ display:none; } .wd-dark-toggle .wd-dark-label-off{ display:none; } html.wd-dark .wd-dark-toggle .wd-dark-icon-sun{ display:none; } html.wd-dark .wd-dark-toggle .wd-dark-icon-moon{ display:inline; } html.wd-dark .wd-dark-toggle .wd-dark-label-on{ display:none; } html.wd-dark .wd-dark-toggle .wd-dark-label-off{ display:inline; } @media (max-width: 640px){ .wd-dark-toggle .wd-dark-label{ display:none !important; } .wd-dark-toggle{ padding:0; width:38px; justify-content:center; } } @media (max-width: 860px){ .wd-menu-toggle{ display:block; } .wd-primary-nav{ display:none; width:100%; } .wd-primary-nav.is-open{ display:block; } .wd-header-inner{ flex-wrap:wrap; } .wd-primary-nav ul{ flex-direction:column; align-items:flex-start; gap:2px; padding-bottom:14px; } .wd-primary-nav ul ul{ position:static; box-shadow:none; border:none; padding-left:14px; display:none; min-width:0; } .wd-primary-nav ul ul a{ white-space:normal; } .wd-primary-nav li.is-open > ul{ display:flex; } } /* ========================================================================== 5. HERO / FRONT PAGE ========================================================================== */ .wd-hero{ background: linear-gradient(135deg, var(--wd-sage-light) 0%, var(--wd-cream) 60%); padding: 56px 0 40px; border-bottom:1px solid var(--wd-line); } .wd-hero-inner{ max-width: 720px; } .wd-hero-eyebrow{ display:inline-block; background: var(--wd-sage); color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:16px; } .wd-hero h1{ margin-top:0; } .wd-hero p.lead{ color: var(--wd-ink-soft); font-size:1.1rem; } .wd-cat-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; } .wd-cat-pills a{ background:var(--wd-white); border:1px solid var(--wd-line); padding:8px 16px; border-radius:999px; font-size:.88rem; font-weight:600; color: var(--wd-ink); } .wd-cat-pills a:hover{ background: var(--wd-sage); color:#fff; border-color:var(--wd-sage); } /* ========================================================================== 6. TARJETAS DE ENTRADA (listados) ========================================================================== */ .wd-post-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:28px; margin: 30px 0; } @media (max-width: 640px){ .wd-post-grid{ grid-template-columns:1fr; } } .wd-card{ background:var(--wd-white); border:1px solid var(--wd-line); border-radius: var(--wd-radius); overflow:hidden; transition: box-shadow .25s ease, transform .25s ease; display:flex; flex-direction:column; } .wd-card:hover{ box-shadow: var(--wd-shadow-hover); transform: translateY(-3px); } .wd-card-thumb{ aspect-ratio: 16/10; overflow:hidden; background: var(--wd-sage-light); position:relative; } .wd-card-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:0; } .wd-card-ribbon{ position:absolute; top:14px; left:14px; z-index:2; background: var(--wd-accent); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:5px 12px; border-radius:999px; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .wd-card-body{ padding: 18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; } .wd-card-cat{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--wd-sage-dark); } .wd-card h2, .wd-card h3{ margin:0; font-size:1.15rem; } .wd-card h2 a, .wd-card h3 a{ color: var(--wd-ink); } .wd-card-excerpt{ color: var(--wd-ink-soft); font-size:.94rem; margin:0; } .wd-card-meta{ font-size:.78rem; color:#8a8f7f; margin-top:auto; padding-top:10px; display:flex; gap:10px; align-items:center; } .wd-card.wd-card-featured{ grid-column: 1 / -1; display:grid; grid-template-columns: 1.1fr 1fr; } @media (max-width:640px){ .wd-card.wd-card-featured{ grid-template-columns:1fr; } } .wd-card-featured .wd-card-thumb{ aspect-ratio:auto; height:100%; } .wd-card-featured .wd-card-body{ justify-content:center; padding:30px; } .wd-card-featured h2{ font-size:1.6rem; } /* Native in-feed ad card (misma estética que las tarjetas de post) */ .wd-card-ad{ background: var(--wd-cream-2); border:1px dashed #c9c0aa; } .wd-ad-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#9a9482; text-align:center; padding:6px 0 0; } /* ========================================================================== 7. ARTÍCULO (single) ========================================================================== */ .wd-breadcrumbs{ font-size:.82rem; color:#8a8f7f; margin: 18px 0; } .wd-breadcrumbs a{ color:#8a8f7f; } .wd-article-header{ max-width: var(--wd-content-max); margin: 0 auto 20px; } .wd-article-header .wd-card-cat{ display:inline-block; margin-bottom:10px; } .wd-article-meta{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; color:var(--wd-ink-soft); font-size:.88rem; margin-top:14px; padding-bottom:20px; border-bottom:1px solid var(--wd-line); } .wd-article-meta .wd-author{ display:flex; align-items:center; gap:8px; font-weight:600; color:var(--wd-ink); } .wd-article-meta img.avatar{ border-radius:50%; width:32px; height:32px; } .wd-featured-image{ max-width: 940px; margin: 0 auto 30px; } .wd-featured-image img{ width:100%; } .wd-article-content{ max-width: var(--wd-content-max); margin: 0 auto; } .wd-article-content h2{ margin-top:2em; scroll-margin-top: 90px; } .wd-article-content p{ text-align: left; } @media (min-width: 700px){ .wd-article-content p{ text-align: justify; text-justify: inter-word; hyphens: auto; } } .wd-article-content h3{ scroll-margin-top: 90px; } .wd-article-content blockquote{ border-left:4px solid var(--wd-sage); background: var(--wd-sage-light); margin: 1.6em 0; padding: 14px 22px; border-radius: 0 10px 10px 0; font-style: italic; color: var(--wd-sage-dark); } .wd-article-content figure{ margin: 1.6em 0; } .wd-article-content figcaption{ font-size:.82rem; color:#8a8f7f; text-align:center; margin-top:6px; } .wd-article-content table{ width:100%; border-collapse:collapse; margin:0; } .wd-article-content table th, .wd-article-content table td{ border:1px solid var(--wd-line); padding:10px 14px; text-align:left; } .wd-article-content table th{ background: var(--wd-cream-2); } .wd-article-content .wd-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.6em 0; } .wd-article-content pre{ background: var(--wd-cream-2); border:1px solid var(--wd-line); border-radius: var(--wd-radius-sm); padding:16px 18px; overflow-x:auto; -webkit-overflow-scrolling:touch; font-size:.88rem; line-height:1.6; margin:1.6em 0; white-space:pre-wrap; word-break:break-word; } .wd-article-content code{ background: var(--wd-cream-2); padding:2px 6px; border-radius:4px; font-size:.9em; } .wd-article-content pre code{ background:none; padding:0; } /* Tabla de contenidos automática */ .wd-toc{ background:var(--wd-white); border:1px solid var(--wd-line); border-radius: var(--wd-radius); padding: 18px 24px; margin: 0 auto 30px; max-width: var(--wd-content-max); } .wd-toc summary{ font-weight:700; cursor:pointer; font-family: var(--wd-font-head); font-size:1.05rem; } .wd-toc ol{ margin: 14px 0 0; padding-left: 1.2em; } .wd-toc a{ font-size:.94rem; } .wd-toc li{ margin-bottom:6px; } /* Barra de progreso de lectura */ #wd-progress-bar{ position:fixed; top:0; left:0; height:3px; width:0%; background: var(--wd-accent); z-index:1000; transition: width .1s linear; } /* Bloque de anuncio "in-article" */ .wd-inarticle-ad{ max-width: var(--wd-content-max); margin: 2.2em auto; text-align:center; } .wd-inarticle-ad .wd-ad-label{ margin-bottom:8px; } /* Caja de autor */ .wd-author-box{ max-width: var(--wd-content-max); margin: 40px auto; background:var(--wd-white); border:1px solid var(--wd-line); border-radius: var(--wd-radius); padding:24px; display:flex; gap:18px; align-items:flex-start; } .wd-author-box img{ border-radius:50%; width:64px; height:64px; flex-shrink:0; } .wd-author-box h4{ margin:0 0 4px; } .wd-author-box h4 a{ color: var(--wd-ink); } .wd-author-box p{ margin:.4em 0; color: var(--wd-ink-soft); font-size:.92rem; } .wd-author-credential{ font-size:.82rem !important; color: var(--wd-sage-dark) !important; font-weight:600; margin:2px 0 6px !important; } .wd-author-more{ font-size:.85rem; font-weight:700; } /* Página de autor */ .wd-author-hero{ display:flex; align-items:center; gap:22px; padding:40px 0 30px; border-bottom:1px solid var(--wd-line); margin-bottom:20px; } @media (max-width:480px){ .wd-author-hero{ flex-direction:column; text-align:center; } } .wd-author-hero img{ border-radius:50%; width:96px; height:96px; flex-shrink:0; } .wd-author-hero h1{ margin:0 0 4px; } .wd-author-bio{ color: var(--wd-ink-soft); max-width:640px; margin-top:8px; } /* Sellos de confianza (plantilla Metodología) */ .wd-trust-badges{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin: 24px 0 40px; } @media (max-width:760px){ .wd-trust-badges{ grid-template-columns: 1fr 1fr; } } .wd-trust-badge{ background: var(--wd-sage-light); border-radius: var(--wd-radius-sm); padding:20px 18px; text-align:center; } .wd-trust-icon{ font-size:1.7rem; display:block; margin-bottom:8px; } .wd-trust-badge h3{ font-size:.95rem; margin:0 0 6px; color: var(--wd-sage-dark); } .wd-trust-badge p{ font-size:.82rem; color: var(--wd-ink-soft); margin:0; } /* ========================================================================== Glosario de términos ========================================================================== */ .wd-glossary-header{ max-width:640px; margin:30px auto 30px; text-align:center; } .wd-glossary-jump{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:40px; position:sticky; top:70px; background: var(--wd-cream); padding:12px 0; z-index:10; } .wd-glossary-jump a{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; background: var(--wd-white); border:1px solid var(--wd-line); border-radius:8px; font-weight:700; font-size:.85rem; color: var(--wd-ink); } .wd-glossary-jump a:hover{ background: var(--wd-sage); color:#fff; border-color: var(--wd-sage); } .wd-glossary-letter{ font-size:1.6rem; border-bottom:2px solid var(--wd-sage-light); padding-bottom:8px; margin: 0 0 18px; scroll-margin-top:120px; } .wd-glossary-group{ margin-bottom:40px; } .wd-glossary-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; } @media (max-width:860px){ .wd-glossary-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width:560px){ .wd-glossary-grid{ grid-template-columns: 1fr; } } .wd-glossary-card{ background: var(--wd-white); border:1px solid var(--wd-line); border-radius: var(--wd-radius-sm); padding:18px 20px; transition: box-shadow .2s ease, transform .15s ease; } .wd-glossary-card:hover{ box-shadow: var(--wd-shadow-hover); transform: translateY(-2px); } .wd-glossary-card h3{ margin:0 0 6px; font-size:1.05rem; color: var(--wd-sage-dark); } .wd-glossary-card p{ margin:0; font-size:.86rem; color: var(--wd-ink-soft); } /* Introducción de página pilar (hub de categoría) */ .wd-pillar-intro{ background:var(--wd-white); border:1px solid var(--wd-line); border-left:5px solid var(--wd-accent); border-radius: var(--wd-radius); padding:30px 34px; margin: 20px 0 40px; max-width: 900px; } .wd-pillar-intro > *:first-child{ margin-top:0; } .wd-pillar-intro > *:last-child{ margin-bottom:0; } /* ========================================================================== Temporizador Pomodoro — shortcode [pomodoro] ========================================================================== */ .wd-pomodoro{ max-width: 340px; margin: 2.5em auto; background:var(--wd-white); border:1px solid var(--wd-line); border-radius: var(--wd-radius); padding: 30px 26px; text-align:center; box-shadow: var(--wd-shadow); transition: background .4s ease; } .wd-pomodoro.wd-pomo-is-break{ background: var(--wd-sage-light); } .wd-pomo-ring{ position:relative; width:200px; height:200px; margin:0 auto 14px; } .wd-pomo-ring svg{ width:100%; height:100%; transform: rotate(-90deg); } .wd-pomo-track{ fill:none; stroke: var(--wd-cream-2); stroke-width:9; } .wd-pomo-progress{ fill:none; stroke: var(--wd-sage); stroke-width:9; stroke-linecap:round; transition: stroke-dashoffset 1s linear, stroke .4s ease; } .wd-pomo-is-break .wd-pomo-progress{ stroke: var(--wd-accent); } .wd-pomo-time{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--wd-font-head); font-size:2.1rem; font-weight:700; color: var(--wd-ink); } .wd-pomo-mode{ font-weight:700; color: var(--wd-sage-dark); margin-bottom:16px; font-size:.95rem; } .wd-pomo-controls{ display:flex; gap:10px; justify-content:center; margin-bottom:14px; } .wd-pomo-btn{ background: var(--wd-sage); color:#fff; border:none; padding:10px 22px; border-radius:999px; font-weight:700; cursor:pointer; font-size:.92rem; transition: background .2s ease, transform .1s ease; } .wd-pomo-btn:hover{ background: var(--wd-sage-dark); } .wd-pomo-btn:active{ transform: scale(.96); } .wd-pomo-btn--ghost{ background: transparent; color: var(--wd-sage-dark); border:1px solid var(--wd-line); } .wd-pomo-btn--ghost:hover{ background: var(--wd-cream-2); } .wd-pomo-sessions{ font-size:.85rem; color: var(--wd-ink-soft); margin:0; } .wd-pomo-count{ color: var(--wd-sage-dark); font-size:1.05rem; } .wd-pomo-presets{ display:flex; gap:8px; justify-content:center; margin-bottom:18px; flex-wrap:wrap; } .wd-pomo-preset{ background: var(--wd-cream-2); border:1px solid var(--wd-line); color: var(--wd-ink-soft); font-weight:700; font-size:.82rem; padding:6px 14px; border-radius:999px; cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .wd-pomo-preset:hover{ border-color: var(--wd-sage); } .wd-pomo-preset.is-active{ background: var(--wd-sage); border-color: var(--wd-sage); color:#fff; } .wd-pomo-community{ font-size:.78rem; color: var(--wd-ink-soft); margin:6px 0 0; padding-top:8px; border-top:1px dashed var(--wd-line); } .wd-pomo-community-count{ color: var(--wd-accent); } /* Versión compacta cuando el Pomodoro va dentro de un widget de sidebar (el contenedor .wd-widget ya aporta tarjeta blanca, borde y padding) */ .wd-pomodoro--widget .wd-pomodoro{ max-width:none; margin:0; background:transparent; border:none; box-shadow:none; padding:0; } .wd-pomodoro--widget .wd-pomo-ring{ width:150px; height:150px; } .wd-pomodoro--widget .wd-pomo-time{ font-size:1.6rem; } .wd-pomodoro--widget .wd-pomo-preset{ font-size:.76rem; padding:5px 11px; } /* ========================================================================== Test "¿Cuál es tu nivel de bienestar digital?" — shortcode [test_bienestar] ========================================================================== */ .wd-quiz{ max-width: 620px; margin: 2em auto; } .wd-quiz-q{ background:var(--wd-white); border:1px solid var(--wd-line); border-radius: var(--wd-radius-sm); padding:20px 22px; margin-bottom:16px; } .wd-quiz-q legend{ font-weight:700; font-family: var(--wd-font-head); font-size:1.05rem; padding:0 0 12px; color: var(--wd-ink); } .wd-quiz-option{ display:flex; align-items:flex-start; gap:10px; padding:9px 4px; border-radius:8px; cursor:pointer; transition: background .15s ease; } .wd-quiz-option:hover{ background: var(--wd-sage-light); } .wd-quiz-option input{ margin-top:4px; accent-color: var(--wd-sage); flex-shrink:0; } .wd-quiz-option span{ font-size:.95rem; color: var(--wd-ink); } .wd-quiz-submit{ display:block; width:100%; padding:14px; font-size:1rem; } .wd-quiz-warning{ color: var(--wd-accent); font-weight:600; text-align:center; margin-top:10px; } .wd-quiz-result{ background:var(--wd-white); border:1px solid var(--wd-line); border-radius: var(--wd-radius); padding:40px 30px; text-align:center; box-shadow: var(--wd-shadow); } .wd-quiz-result-icon{ font-size:3rem; margin-bottom:6px; } .wd-quiz-result-title{ margin:0 0 4px; } .wd-quiz-result-score{ color: var(--wd-ink-soft); font-weight:700; margin:0 0 16px; } .wd-quiz-result-desc{ color: var(--wd-ink-soft); max-width:420px; margin:0 auto 24px; } .wd-quiz-result-link{ display:inline-block; text-decoration:none; margin-bottom:12px; } .wd-quiz-share-prompt{ font-size:.85rem; color: var(--wd-ink-soft); margin: 18px 0 8px; font-style:italic; } /* CTA del test — reutilizable en artículo y en portada */ .wd-quiz-cta{ display:flex; align-items:center; gap:16px; text-decoration:none; } .wd-quiz-cta-icon{ font-size:1.6rem; flex-shrink:0; } .wd-quiz-cta--article{ max-width: var(--wd-content-max); margin: 2.5em auto; background: var(--wd-sage-light); border: 1px solid #cfe0d6; border-radius: var(--wd-radius); padding: 22px 26px; } .wd-quiz-cta--article h4{ margin:0 0 4px; color: var(--wd-sage-dark); } .wd-quiz-cta--article p{ margin:0; color: var(--wd-ink-soft); font-size:.9rem; } .wd-quiz-cta--article .wd-pomo-btn{ flex-shrink:0; text-decoration:none; white-space:nowrap; } @media (max-width:600px){ .wd-quiz-cta--article{ flex-wrap:wrap; } .wd-quiz-cta--article .wd-pomo-btn{ width:100%; text-align:center; } } .wd-quiz-cta--home{ margin-top:24px; background:var(--wd-white); border:1px solid var(--wd-line); border-radius:999px; padding:12px 22px; font-weight:600; color: var(--wd-ink); font-size:.92rem; max-width: fit-content; transition: box-shadow .2s ease, transform .15s ease; box-shadow: var(--wd-shadow); } .wd-quiz-cta--home:hover{ box-shadow: var(--wd-shadow-hover); transform: translateY(-2px); color: var(--wd-ink); } .wd-quiz-cta--home .wd-quiz-cta-arrow{ color: var(--wd-accent); font-weight:700; } @media (max-width:640px){ .wd-quiz-cta--home{ max-width:none; white-space:normal; } } /* Enlace destacado en el menú principal — añade la clase CSS "menu-item-cta" al elemento del menú en Apariencia → Menús (activa "Clases CSS" en Opciones de pantalla si no la ves) */ .wd-primary-nav .menu-item-cta > a{ background: var(--wd-accent); color:#fff !important; padding:7px 16px; border-radius:999px; } .wd-primary-nav .menu-item-cta > a:hover{ background: #c67a56; color:#fff !important; } /* ========================================================================== Página de contacto (plantilla "Contacto") ========================================================================== */ .wd-contact-wrap{ max-width: 1000px; margin: 0 auto; padding: 20px 0 60px; } .wd-contact-header{ text-align:center; max-width:600px; margin:0 auto 40px; } .wd-contact-lead{ color: var(--wd-ink-soft); font-size:1.05rem; } .wd-contact-grid{ display:grid; grid-template-columns: 280px 1fr; gap:36px; align-items:start; } @media (max-width:760px){ .wd-contact-grid{ grid-template-columns:1fr; } } .wd-contact-info{ display:flex; flex-direction:column; gap:24px; background: var(--wd-sage-light); border-radius: var(--wd-radius); padding:26px 22px; } .wd-contact-info-item{ display:flex; gap:12px; align-items:flex-start; } .wd-contact-icon{ font-size:1.3rem; flex-shrink:0; } .wd-contact-info-item h3{ font-size:.92rem; margin:0 0 4px; color: var(--wd-sage-dark); } .wd-contact-info-item p{ font-size:.85rem; color: var(--wd-ink-soft); margin:0; } .wd-contact-info-item a{ text-decoration:underline; } .wd-contact-form-box{ background:var(--wd-white); border:1px solid var(--wd-line); border-radius: var(--wd-radius); padding:34px 38px; box-shadow: var(--wd-shadow); } @media (max-width:600px){ .wd-contact-form-box{ padding:26px 22px; } } /* --- Estilizado de Contact Form 7 con la identidad de la marca --- */ .wd-contact-form-box .wpcf7-form p{ margin-bottom:20px; } .wd-contact-form-box .wpcf7-form label{ display:block; font-weight:600; font-size:.9rem; color: var(--wd-ink); margin-bottom:6px; } .wd-contact-form-box .wpcf7-form-control-wrap{ display:block; } .wd-contact-form-box input[type="text"].wpcf7-form-control, .wd-contact-form-box input[type="email"].wpcf7-form-control, .wd-contact-form-box input[type="tel"].wpcf7-form-control, .wd-contact-form-box input[type="url"].wpcf7-form-control, .wd-contact-form-box select.wpcf7-form-control, .wd-contact-form-box textarea.wpcf7-form-control{ width:100%; font-family: var(--wd-font-body); font-size:1rem; color: var(--wd-ink); padding:12px 14px; border:1px solid var(--wd-line); border-radius: var(--wd-radius-sm); background: var(--wd-cream); transition: border-color .2s ease, box-shadow .2s ease; } .wd-contact-form-box textarea.wpcf7-form-control{ min-height:150px; resize:vertical; } .wd-contact-form-box .wpcf7-form-control:focus{ outline:none; border-color: var(--wd-sage); background:var(--wd-white); box-shadow: 0 0 0 3px rgba(79,117,102,0.15); } .wd-contact-form-box .wpcf7-list-item{ margin: 4px 16px 4px 0; } .wd-contact-form-box .wpcf7-list-item label{ display:flex; align-items:center; gap:8px; font-weight:500; } .wd-contact-form-box input[type="submit"].wpcf7-form-control{ background: var(--wd-sage); color:#fff; border:none; padding:13px 30px; border-radius:999px; font-weight:700; font-size:1rem; cursor:pointer; transition: background .2s ease, transform .1s ease; width:auto; } .wd-contact-form-box input[type="submit"].wpcf7-form-control:hover{ background: var(--wd-sage-dark); } .wd-contact-form-box input[type="submit"].wpcf7-form-control:active{ transform: scale(.97); } .wd-contact-form-box .wpcf7-spinner{ margin-left:10px; } .wd-contact-form-box .wpcf7-not-valid-tip{ color: var(--wd-accent); font-size:.82rem; margin-top:5px; font-weight:600; } .wd-contact-form-box .wpcf7-form-control.wpcf7-not-valid{ border-color: var(--wd-accent); } .wd-contact-form-box .wpcf7-response-output{ border-radius: var(--wd-radius-sm); padding:14px 18px; font-size:.92rem; margin-top:18px; } .wd-contact-form-box form.sent .wpcf7-response-output{ background: var(--wd-sage-light); border-color:#cfe0d6 !important; color: var(--wd-sage-dark); } .wd-contact-form-box form.failed .wpcf7-response-output, .wd-contact-form-box form.aborted .wpcf7-response-output, .wd-contact-form-box form.spam .wpcf7-response-output{ background:#fbeae3; border-color:#f0c8b3 !important; color:#b0472a; } /* El campo "Δ" (acortador oculto de CF7) — asegurarse de que nunca ocupe espacio visual */ .wd-contact-form-box .wpcf7-form > p:has(> label:only-child:empty), .wd-contact-form-box input[name="_wpcf7"], .wd-contact-form-box input[name="_wpcf7_version"], .wd-contact-form-box input[name="_wpcf7_locale"], .wd-contact-form-box input[name="_wpcf7_unit_tag"], .wd-contact-form-box input[name="_wpcf7_container_post"]{ display:none; } /* Campo trampa (honeypot) — oculto de forma accesible: fuera de la pantalla, no con display:none (algunos bots ignoran display:none) */ .wd-contact-form-box .wd-honeypot-field{ position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; } /* Intento de ocultar botones de "compartir" de plugins de terceros dentro de la página de contacto (no tiene sentido "compartir" un formulario). Cubre las clases más habituales de plugins de share buttons; si tu plugin usa otro nombre, dime cuál es y lo afino. */ .wd-contact-form-box .sharedaddy, .wd-contact-form-box .sassy-social-share, .wd-contact-form-box .addtoany_share_save_container, .wd-contact-form-box .simple-social-buttons, .wd-contact-form-box .heateor_sss_sharing_container, .wd-contact-form-box .ssba, .wd-contact-form-box .ssba-bar, .wd-contact-form-box .social-share-buttons, .wd-contact-form-box [class*="share-buttons"], .wd-contact-form-box [class*="social-share"]{ display:none !important; } .wd-quiz-result .wd-quiz-share{ display:block; width:100%; margin: 8px 0; } .wd-quiz-retry{ background:none; border:none; color: var(--wd-ink-soft); font-size:.85rem; text-decoration:underline; cursor:pointer; margin-top:6px; } /* Badge "Actualizado el..." */ .wd-updated-badge{ background: var(--wd-sage-light); color: var(--wd-sage-dark); font-weight:700; padding:3px 10px; border-radius:999px; font-size:.78rem; } /* Bloque FAQ (acordeón) */ .wd-faq-block{ margin: 2em 0; } .wd-faq-item{ background:var(--wd-white); border:1px solid var(--wd-line); border-radius: var(--wd-radius-sm); padding:16px 20px; margin-bottom:10px; } .wd-faq-item summary{ font-weight:700; cursor:pointer; color: var(--wd-ink); list-style:none; position:relative; padding-right:24px; } .wd-faq-item summary::-webkit-details-marker{ display:none; } .wd-faq-item summary::after{ content:"+"; position:absolute; right:0; top:0; font-size:1.2rem; color: var(--wd-sage); } .wd-faq-item[open] summary::after{ content:"–"; } .wd-faq-answer{ margin-top:12px; color: var(--wd-ink-soft); font-size:.95rem; } .wd-faq-answer p:last-child{ margin-bottom:0; } /* Bloque HowTo (pasos numerados) */ .wd-howto-block{ margin: 2em 0; } .wd-howto-step{ display:flex; gap:16px; margin-bottom:22px; } .wd-howto-num{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background: var(--wd-sage); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-family: var(--wd-font-head); } .wd-howto-body h4{ margin:0 0 4px; font-size:1.05rem; } .wd-howto-body p{ margin:0; color: var(--wd-ink-soft); } /* Relacionados */ .wd-related{ max-width: 980px; margin: 50px auto; } .wd-related h3{ text-align:center; margin-bottom: 22px; } /* Tags */ .wd-tags{ max-width: var(--wd-content-max); margin: 30px auto; display:flex; flex-wrap:wrap; gap:8px; } .wd-tags a{ background: var(--wd-cream-2); padding:6px 14px; border-radius:999px; font-size:.82rem; color: var(--wd-ink); } /* ========================================================================== 8b. CAJA "RESUMEN RÁPIDO" (TL;DR) ========================================================================== */ .wd-summary-box{ background: var(--wd-sage-light); border: 1px solid #cfe0d6; border-left: 5px solid var(--wd-sage); border-radius: var(--wd-radius-sm); padding: 18px 22px; margin: 0 0 2em; } .wd-summary-label{ margin:0 0 8px; font-weight:700; color: var(--wd-sage-dark); font-size:.9rem; text-transform:uppercase; letter-spacing:.03em; } .wd-summary-box ul{ margin:0; padding-left: 1.1em; } .wd-summary-box li{ margin-bottom:6px; color: var(--wd-ink); } .wd-summary-box p{ margin:0; color: var(--wd-ink); } /* ========================================================================== 8c. CITA DESTACADA — shortcode [cita] ========================================================================== */ blockquote.wd-pullquote{ background: var(--wd-white); border: none; border-radius: var(--wd-radius); margin: 2em 0; padding: 30px 34px 26px; text-align:center; box-shadow: var(--wd-shadow); position:relative; font-style:normal; color: var(--wd-ink); } .wd-pullquote-icon{ display:block; font-size:1.6rem; margin-bottom:10px; opacity:.8; } .wd-pullquote p{ font-family: var(--wd-font-head); font-size:1.35rem; font-weight:600; line-height:1.45; color: var(--wd-sage-dark); margin:0; } .wd-pullquote cite{ display:block; margin-top:14px; font-style:normal; font-size:.85rem; color: var(--wd-ink-soft); } /* ========================================================================== 8d. MODO LECTURA ZEN ========================================================================== */ .wd-zen-toggle{ margin-left:auto; background: var(--wd-sage-light); border:1px solid #cfe0d6; color: var(--wd-sage-dark); font-weight:700; font-size:.8rem; padding:7px 14px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition: background .2s ease; } .wd-zen-toggle:hover{ background:#d9e8df; } .wd-zen-toggle[aria-pressed="true"]{ background: var(--wd-sage); color:#fff; border-color: var(--wd-sage); } .wd-zen-icon{ font-size:1rem; } body.wd-zen-mode .wd-layout{ grid-template-columns: 1fr; } body.wd-zen-mode .wd-sidebar, body.wd-zen-mode .wd-inarticle-ad, body.wd-zen-mode .wd-ad-header-slot, body.wd-zen-mode .wd-ad-footer-slot, body.wd-zen-mode .wd-related, body.wd-zen-mode .wd-ad-mobile-sticky{ display:none !important; } body.wd-zen-mode .wd-article-content, body.wd-zen-mode .wd-article-header, body.wd-zen-mode .wd-featured-image, body.wd-zen-mode .wd-summary-box, body.wd-zen-mode .wd-author-box{ max-width: 680px; } body.wd-zen-mode .wd-article-content{ font-size: 1.14rem; line-height: 1.95; } body.wd-zen-mode{ background: var(--wd-cream); } body.wd-zen-mode .wd-site-header{ opacity:.55; transition: opacity .2s ease; } body.wd-zen-mode .wd-site-header:hover{ opacity:1; } /* ========================================================================== 8. SIDEBAR + ADS ========================================================================== */ .wd-sidebar{ position: sticky; top: 90px; display:flex; flex-direction:column; gap:26px; } .wd-widget{ background:var(--wd-white); border:1px solid var(--wd-line); border-radius: var(--wd-radius); padding:22px; } .wd-widget h2, .wd-widget h3{ font-size:1.05rem; margin-top:0; border-bottom:2px solid var(--wd-sage-light); padding-bottom:10px; } .wd-widget ul{ list-style:none; padding:0; margin:0; } .wd-widget li{ padding: 9px 0; border-bottom:1px dashed var(--wd-line); font-size:.92rem; } .wd-widget li:last-child{ border-bottom:none; } .wd-ad-slot{ text-align:center; background:var(--wd-white); border:1px solid var(--wd-line); border-radius: var(--wd-radius); padding: 14px 12px; overflow:hidden; } .wd-ad-slot.is-empty{ display:none; } .wd-ad-slot ins{ max-width:100%; } .wd-ad-header-slot{ background: var(--wd-cream); border-bottom:1px solid var(--wd-line); } .wd-ad-header-slot .wd-container{ padding: 14px 20px; text-align:center; } .wd-ad-footer-slot{ background: var(--wd-cream-2); border-top:1px solid var(--wd-line); padding: 30px 0; text-align:center; } /* Anuncio sticky móvil (anchor ad) */ .wd-ad-mobile-sticky{ display:none; } @media (max-width: 640px){ .wd-ad-mobile-sticky.has-ad{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:999; background:var(--wd-white); border-top:1px solid var(--wd-line); text-align:center; padding:4px; box-shadow: 0 -6px 16px rgba(0,0,0,.08); } body.wd-has-sticky-ad{ padding-bottom: 74px; } } /* ========================================================================== 9. NEWSLETTER / CTA ========================================================================== */ .wd-newsletter{ background: var(--wd-sage-dark); color:#fff; border-radius: var(--wd-radius); padding: 26px; text-align:center; } .wd-newsletter h3{ color:#fff; } .wd-newsletter p{ color: #d9e6de; font-size:.9rem; } .wd-newsletter form{ display:flex; gap:8px; margin-top:14px; } @media (max-width:360px){ .wd-newsletter form{ flex-direction:column; } } .wd-newsletter input[type=email]{ flex:1; padding:10px 12px; border-radius:8px; border:none; } .wd-newsletter button{ background: var(--wd-accent); color:#fff; border:none; padding:10px 16px; border-radius:8px; font-weight:700; cursor:pointer; } /* ========================================================================== 10. FOOTER ========================================================================== */ .wd-site-footer{ background: #1c211a; color: #cdd2c6; padding: 50px 0 24px; margin-top: 40px; } .wd-footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; } @media (max-width: 760px){ .wd-footer-grid{ grid-template-columns: 1fr 1fr; } } .wd-footer-grid h4{ color:#fff; font-family: var(--wd-font-head); font-size:1rem; margin-top:0; } .wd-footer-grid ul{ list-style:none; padding:0; margin:0; } .wd-footer-grid li{ margin-bottom:8px; } .wd-footer-grid a{ color:#b7bdac; font-size:.9rem; } .wd-footer-grid a:hover{ color:#fff; } .wd-footer-bottom{ border-top:1px solid #3a4034; margin-top:36px; padding-top:20px; text-align:center; font-size:.82rem; color:#8b9080; } /* ========================================================================== 11. PAGINACIÓN, BÚSQUEDA, WIDGETS WP DEFAULT ========================================================================== */ .wd-pagination{ display:flex; justify-content:center; gap:8px; margin: 40px 0; } .wd-pagination a, .wd-pagination span{ padding:9px 15px; border:1px solid var(--wd-line); border-radius:8px; font-size:.9rem; background:var(--wd-white); } .wd-pagination .current{ background: var(--wd-sage); color:#fff; border-color: var(--wd-sage); } .wd-search-form{ display:flex; gap:8px; } .wd-search-form input[type=search]{ flex:1; padding:10px 12px; border:1px solid var(--wd-line); border-radius:8px; } .wd-search-form button{ background: var(--wd-sage); color:#fff; border:none; border-radius:8px; padding:0 16px; cursor:pointer; } /* Content policy notice para el admin (solo visible logueado) */ .wd-admin-ad-hint{ font-size:.72rem; color:#b08a3e; background:#fff8ea; border:1px dashed #e3c98a; padding:6px 10px; border-radius:6px; margin-bottom:6px; }