/* ============================================================================ dental.css — diseño del kit DENTAL (tpl-landing-dental / tpl-services-dental) ---------------------------------------------------------------------------- Copia LITERAL del CSS del mockup aprobado (calude_share/dental-demo/assets/theme.css) — no se reescribe ni un selector. El acotado se consigue por CARGA, no por selector: functions.php solo encola este archivo en las dos plantillas del kit dental, así que estas reglas nunca llegan a la página de otro cliente. ⚠️ Al portarlo se quitan solo tres cosas, y con el ancla ^ obligatoria: `:root` (lo inyecta el Site Designer), el reset `*{}` y `body{}` (los pone el theme). Sin el ancla, el patrón de `body{...}` también se comía `.post .body{...}` y dejaba el selector inválido `.post ..post .tag` — que invalida el bloque ENTERO: las tarjetas de blog perdían su padding y se quedaban con el aspecto del :hover. ⚠️ NO lleva :root propio salvo los dos auxiliares del diseño, para que el sitio se re-tematice cambiando la paleta del Site Designer. ========================================================================== */ :root{ --sand:#E7E1D5; /* crema auxiliar (fondos de foto, texto sobre oscuro) */ --dark-line:#3a2c1c; /* separador dentro de las bandas oscuras */ } /* ⭐ Colores del diseño que NO se derivan de la paleta. `--brand-line` es un derivado en theme.css, calculado a partir del acento y el fondo. Ese cálculo da un tono coherente con cualquier marca, pero NO puede reproducir un color elegido a mano por un diseñador: aquí el mockup usa un crema dorado concreto (#F0E6D3) y el derivado quedaba visiblemente más apagado. Como este kit ya es una plantilla de diseño fija (no se compone con patterns), se fija el valor literal del mockup. ⚠️ Consecuencia asumida: para otra clínica con paleta distinta hay que cambiar este valor a mano — no se re-tematiza solo como el resto del kit. Es el mismo intercambio que ya se aceptó al elegir plantilla sobre patterns. El token no solo pinta bordes: los diseños lo usan como FONDO de sección (la banda "How it works" y la de "Latest news"). */ .siw-dental{ --brand-line:#F0E6D3; } /* ══════════════════════════════════════════════════════════════════════════ MOCKUP — BrightTeeth Dental Los tokens son los MISMOS del theme softinweb-corporate, así que esta paleta se pega tal cual en el Site Designer y el sitio queda idéntico. ══════════════════════════════════════════════════════════════════════════ */ .siw-dental h1, .siw-dental h2, .siw-dental h3, .siw-dental h4{margin:0;font-family:var(--brand-font-heading);color:var(--brand-primary); font-weight:600;letter-spacing:-.02em;text-wrap:pretty} .siw-dental h1{font-size:clamp(34px,5vw,60px);line-height:1.08} .siw-dental h2{font-size:clamp(28px,3.6vw,46px);line-height:1.1} .siw-dental p{margin:0} .siw-dental img{display:block;max-width:100%} .siw-dental a{color:var(--brand-accent);text-decoration:none} :focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px} .siw-dental .sw-wrap{max-width:1300px;margin:0 auto;padding:0 20px} .siw-dental section{padding:100px 0} /* eyebrow — el "ABOUT US" con la rayita */ .siw-dental .sw-eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--brand-font); letter-spacing:.18em;text-transform:uppercase;color:var(--brand-accent);margin:0 0 20px} .siw-dental .sw-eyebrow::before{content:"";width:26px;height:1px;background:currentColor;display:block} /* botón pastilla con la flecha en círculo */ .siw-dental .sw-btn{display:inline-flex;align-items:center;gap:10px;background:var(--brand-accent); color:#fff;font:500 16px/1.5 var(--brand-font);border:1px solid var(--brand-accent); border-radius:50px;padding:6px 6px 6px 24px;white-space:nowrap;transition:.2s} .siw-dental .sw-btn:hover{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff} .siw-dental .sw-btn i{display:grid;place-items:center;width:38px;height:38px;border-radius:50px; background:#fff;color:var(--brand-accent);font-style:normal;font-size:15px} .siw-dental .sw-btn-dark{background:var(--brand-primary);border-color:var(--brand-primary)} .siw-dental .sw-btn-dark:hover{background:var(--brand-accent);border-color:var(--brand-accent)} .siw-dental .sw-btn-dark i{color:var(--brand-primary)} .sw-card{background:var(--brand-surface);border:1px solid var(--brand-line); border-radius:var(--brand-radius);padding:26px} .grid{display:grid;gap:24px} .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .muted{color:var(--brand-muted)} .siw-dental .lede{font-size:17px;line-height:1.7;margin-top:22px} /* ── barra superior ── */ .topbar{background:var(--brand-accent);color:#fff;padding:12px 0;font:500 15px/1.5 var(--brand-font)} .topbar .sw-wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between} .topbar span{display:inline-flex;align-items:center;gap:9px} .topbar a{color:#fff} /* ── header ── */ .siw-dental header{position:sticky;top:0;z-index:50;background:var(--brand-bg); border-bottom:1px solid var(--brand-line);padding:14px 0} .siw-dental header .sw-wrap{display:flex;gap:24px;align-items:center;justify-content:space-between} .logo{display:flex;align-items:center;gap:10px;color:var(--brand-primary); font:600 22px/1 var(--brand-font-heading)} .logo b{display:grid;place-items:center;width:38px;height:38px;border-radius:50px; background:var(--brand-accent);color:#fff;font:700 18px/1 var(--brand-font-heading)} .logo span{color:var(--brand-accent)} .siw-dental nav{display:flex;gap:6px;align-items:center;border:1px solid var(--brand-line); border-radius:50px;padding:6px 14px;background:#fff} .siw-dental nav a{color:var(--brand-text);font:500 15px/1.5 var(--brand-font);padding:8px 13px} .siw-dental nav a:hover{color:var(--brand-accent)} /* ── hero ── */ .hero{padding:70px 0 0} .hero .sw-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start} .hero-pill{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--brand-font); letter-spacing:.18em;text-transform:uppercase;color:var(--brand-accent); border:1px solid var(--brand-line);background:#fff;border-radius:50px;padding:10px 18px} .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px; padding-top:34px;border-top:1px solid var(--brand-line)} .hero-stats>div{background:#fff;border:1px solid var(--brand-line); border-radius:var(--brand-radius);padding:18px 20px} .hero-stats b{display:block;font:600 30px/1.1 var(--brand-font-heading);color:var(--brand-accent)} .hero-stats .dark{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--sand)} .hero-stats .dark b{color:#fff} .hero-art{position:relative;display:flex;justify-content:center;align-items:flex-start} /* ⚠️ El círculo iba en --sand (#E7E1D5), casi idéntico al fondo (#F3F2ED): no se distinguía y las batas blancas encima desaparecían. En dorado la foto se despega del fondo y el equipo destaca. */ .hero-art .circle{position:absolute;bottom:0;left:50%;transform:translateX(-50%); width:min(100%,560px);aspect-ratio:1/1;border-radius:50%;background:var(--brand-accent)} /* La foto del hero es un recorte de persona: alta, sin fondo, apoyada en el borde inferior del círculo. object-fit:contain evita que se deforme si el archivo real no tiene exactamente esta proporción. */ /* La foto generada trae su propio fondo dorado sólido, así que va en un rectángulo redondeado en vez del círculo — el círculo del CSS sobraría. */ /* aspect-ratio 2/3 con la columna ancha da 800px+ de alto: el hero se dispara y el texto queda flotando. max-height lo acota. */ .hero-art img{position:relative;width:100%;aspect-ratio:2/3;max-height:700px; object-fit:cover;object-position:center 30%;border-radius:var(--brand-radius)} .rating{display:flex;align-items:center;gap:14px} .rating .faces{display:flex} .rating .faces img{width:44px;height:44px;border-radius:50px;object-fit:cover;border:2px solid var(--brand-bg)} .rating .faces img+img{margin-left:-14px} /* ── secciones oscuras ── */ .dark-section{background:var(--brand-primary);color:var(--sand)} .dark-section h2,.dark-section h3{color:#fff} .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--dark-line);margin-top:40px} .stat-grid>div{background:var(--brand-primary);padding:26px 24px} .stat-grid b{display:block;font:600 44px/1 var(--brand-font-heading);color:var(--brand-accent)} /* ── servicios ── */ .svc{display:block;background:var(--brand-bg);border:1px solid var(--brand-line); border-radius:var(--brand-radius);padding:34px 30px 30px;color:var(--brand-text);transition:.2s} .svc:hover{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--sand)} .svc:hover h3{color:#fff} .svc-top{display:flex;align-items:center;justify-content:space-between} .svc-no{font:600 14px/1 var(--brand-font-heading);letter-spacing:.14em;color:var(--brand-accent)} .svc-arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50px; background:var(--brand-accent);color:#fff;font-size:15px} .svc h3{margin:26px 0 0;font-size:24px;line-height:1.3} .svc-meta{margin-top:22px;padding-top:18px;border-top:1px solid var(--brand-line); font:500 15px/1.4 var(--brand-font);color:var(--brand-accent)} /* ── check list ── */ .checks{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin-top:32px} .checks div{display:flex;gap:12px;align-items:flex-start;font-size:16px} .checks i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50px; background:rgba(169,135,90,.28);color:var(--brand-accent);font-style:normal;font-size:14px;font-weight:700} /* ── pasos ── */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px; border-top:1px solid #d9c9ac;padding-top:0} .step{padding-top:34px;position:relative} .step::before{content:"";position:absolute;top:-9px;left:0;width:18px;height:18px; border-radius:50px;background:var(--brand-accent);border:4px solid var(--brand-line)} .step .n{font:600 60px/1 var(--brand-font-heading);color:#d9c9ac} .step h3{margin:18px 0 0;font-size:22px;line-height:1.3} /* ── testimonios ── */ .quote{margin:0;background:#fff;border:1px solid var(--brand-line);border-radius:var(--brand-radius); padding:34px 30px;display:flex;flex-direction:column;gap:22px} .stars{color:var(--brand-accent);letter-spacing:2px} .quote blockquote{margin:0;font:400 18px/1.6 var(--brand-font);color:var(--brand-primary)} .quote figcaption{margin-top:auto;padding-top:22px;border-top:1px solid var(--brand-line); display:flex;gap:14px;align-items:center} .quote figcaption img{width:46px;height:46px;border-radius:50px;object-fit:cover} /* ── comparador antes/después (el pattern siw/compare del theme) ── */ .siw-cmp{position:relative;width:100%;overflow:hidden;user-select:none; border-radius:var(--brand-radius);cursor:ew-resize;height:460px;background:var(--sand)} .siw-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none} .siw-cmp-tag{position:absolute;top:20px;z-index:3;font:500 13px/1 var(--brand-font); letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:50px;color:#fff} .siw-cmp-tag-before{left:20px;background:var(--brand-primary)} .siw-cmp-tag-after{right:20px;background:var(--brand-accent)} .siw-cmp-handle{position:absolute;top:0;bottom:0;width:2px;z-index:4;background:#fff; transform:translateX(-50%);cursor:ew-resize;border:0;padding:0} .siw-cmp-handle::after{content:"‹ ›";position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50px;background:#fff; color:var(--brand-primary);display:grid;place-items:center;font:600 16px/1 var(--brand-font); box-shadow:0 6px 18px rgba(26,15,0,.25)} /* ── FAQ ── */ .faq{display:flex;flex-direction:column;gap:2px;background:var(--brand-line);margin-top:40px} .faq details{background:#fff} .faq summary{display:flex;gap:20px;align-items:center;justify-content:space-between; padding:24px 26px;cursor:pointer;font:600 19px/1.4 var(--brand-font-heading); color:var(--brand-primary);list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:34px;height:34px; border-radius:50px;background:rgba(169,135,90,.28);color:var(--brand-accent);font:500 20px/1 var(--brand-font)} .faq details[open] summary::after{content:"−"} .faq p{padding:0 26px 26px;font-size:16px;line-height:1.7;max-width:66ch} /* ── blog ── */ .post{display:block;background:#fff;border-radius:var(--brand-radius);overflow:hidden; color:var(--brand-text);transition:.2s} .post:hover{background:var(--brand-primary);color:var(--sand)} .post:hover h3{color:#fff} .post img{width:100%;aspect-ratio:3/2;object-fit:cover} .post .body{padding:26px 28px 30px} .post .tag{display:flex;gap:12px;align-items:center;font:500 14px/1 var(--brand-font);color:var(--brand-accent)} .post h3{margin:16px 0 0;font-size:22px;line-height:1.35} /* ── formulario ── */ .siw-dental form.book{background:var(--brand-bg);border-radius:var(--brand-radius);padding:38px 34px; display:grid;grid-template-columns:1fr 1fr;gap:18px} .siw-dental form.book label{display:flex;flex-direction:column;gap:8px;font:500 14px/1 var(--brand-font); letter-spacing:.1em;text-transform:uppercase;color:var(--brand-primary)} .siw-dental form.book input, .siw-dental form.book select, .siw-dental form.book textarea{border:1px solid var(--brand-line); background:#fff;border-radius:50px;padding:14px 18px;font:400 16px/1.4 var(--brand-font); color:var(--brand-text);width:100%} .siw-dental form.book textarea{border-radius:var(--brand-radius);resize:vertical;min-height:96px} .siw-dental form.book .full{grid-column:1/-1} /* ── footer ── */ /* La sección "book" también es --brand-primary: sin este borde el footer se funde con ella y parece un único bloque enorme. */ .siw-dental footer{background:var(--brand-primary);color:var(--sand);padding:70px 0 30px; border-top:1px solid var(--dark-line)} .siw-dental footer h4{color:#fff;font-size:18px;margin-bottom:16px} .siw-dental footer a{color:var(--sand);display:block;padding:5px 0} .siw-dental footer a:hover{color:var(--brand-accent)} .foot-bottom{border-top:1px solid var(--dark-line);margin-top:44px;padding-top:24px; display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px} @media (max-width:980px){ .hero .sw-wrap,.g2,.g3,.g4,.steps,.stat-grid,.checks,form.book,.hero-stats{grid-template-columns:1fr} nav,.topbar{display:none} section{padding:64px 0} .hero-art{min-height:auto} } /* ══════════════════════════════════════════════════════════════════════════ PÁGINA DE SERVICIOS — pattern siw/services-split repetido y alternado ══════════════════════════════════════════════════════════════════════════ */ /* ── cabecera de página interior ── Más baja que el hero del home: aquí el visitante ya sabe dónde está. */ .page-head{padding:64px 0 56px;border-bottom:1px solid var(--brand-line)} .page-head .sw-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end} .crumbs{font:500 14px/1 var(--brand-font);color:var(--brand-muted);margin-bottom:18px} .crumbs a{color:var(--brand-muted)} .crumbs a:hover{color:var(--brand-accent)} .crumbs span{color:var(--brand-accent)} /* ── índice de anclas ── Las mismas 6 tarjetas del home, aquí como navegación de la propia página. Es lo que hace que el enlace #implants del home aterrice en algo navegable. */ .svc-index{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px} .svc-index a{display:inline-flex;align-items:center;gap:9px;background:#fff; border:1px solid var(--brand-line);border-radius:50px;padding:10px 18px; font:500 15px/1.4 var(--brand-font);color:var(--brand-text);transition:.2s} .svc-index a:hover{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff} .svc-index a b{font:600 13px/1 var(--brand-font-heading);color:var(--brand-accent);letter-spacing:.1em} .svc-index a:hover b{color:var(--brand-accent)} /* ── la fila de servicio ── ⚠️ scroll-margin-top: el header es sticky (~70px). Sin esto, al llegar por #implants el título queda TAPADO por la barra. Es el bug clásico de las anclas con header fijo. */ .svc-row{padding:96px 0;border-bottom:1px solid var(--brand-line);scroll-margin-top:88px} .svc-row .sw-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} /* La alternancia. ⚠️ NO usar :nth-child(even) aquí: estas
NO son hermanas consecutivas — antes van .topbar,
y .page-head, así que la paridad cae corrida y el patrón sale invertido. Además se rompería al añadir cualquier sección nueva. La clase .alt lo hace explícito e inmune al orden. El orden visual se invierte con `order`, NO reordenando el HTML: así el lector de pantalla y el móvil siempre reciben imagen → texto. */ .svc-row.alt .svc-row-art{order:2} .svc-row-art{position:relative} .svc-row-art img{width:100%;aspect-ratio:4/3;object-fit:cover; border-radius:var(--brand-radius);background:var(--sand)} /* el número grande, apoyado en la esquina de la foto */ .svc-row-art .badge{position:absolute;bottom:-18px;left:-18px;width:88px;height:88px; border-radius:50px;background:var(--brand-accent);color:#fff;display:grid;place-items:center; font:600 30px/1 var(--brand-font-heading);border:8px solid var(--brand-bg)} /* en las filas invertidas el badge se va a la otra esquina */ .svc-row.alt .svc-row-art .badge{left:auto;right:-18px} /* fondo alterno para que las filas no se fundan en un muro continuo */ .svc-row.alt{background:#fff} .svc-row.alt .badge{border-color:#fff} .svc-row h2{font-size:clamp(26px,3vw,38px)} .svc-row .lede{max-width:52ch} /* lo que incluye — dos columnas de checks dentro de la fila */ .svc-row .checks{grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:28px} /* la tira de datos bajo el texto (duración, desde qué edad…) */ .svc-facts{display:flex;flex-wrap:wrap;gap:34px;margin-top:32px;padding-top:26px; border-top:1px solid var(--brand-line)} .svc-facts b{display:block;font:600 24px/1.1 var(--brand-font-heading);color:var(--brand-accent)} .svc-facts span{font-size:14px;color:var(--brand-muted)} /* ── banda de cierre entre filas y el formulario ── */ .svc-cta{background:var(--brand-line);padding:72px 0} .svc-cta .sw-wrap{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between} @media (max-width:980px){ .page-head .sw-wrap,.svc-row .sw-wrap,.svc-row .checks{grid-template-columns:1fr} .svc-row{padding:56px 0} /* en una sola columna la alternancia no aplica: la imagen siempre va primero */ .svc-row.alt .svc-row-art{order:0} .svc-row-art .badge{width:66px;height:66px;font-size:24px;bottom:-14px;left:-10px;border-width:6px} .svc-row.alt .svc-row-art .badge{right:auto;left:-10px} } /* ============================================================================ Ajustes de integración con el theme (no venían en el mockup, que era una página suelta sin cabecera ni pie del theme) ========================================================================== */ /* ⚠️ `.sw-footer` del theme lleva `margin-top: 62px`, pensado para separarlo de un contenido de fondo claro. Aquí la última sección ("Book your appointment") es oscura y del mismo color que el footer, así que ese margen se veía como una FRANJA CLARA cruzando la página justo encima del pie. En el mockup los dos bloques van seguidos, sin costura. */ .siw-dental + .sw-footer, .siw-dental ~ .sw-footer { margin-top: 0; } /* El formulario de reserva (shortcode [siw_contact style="book"]) reusa las reglas de `form.book` del mockup; solo hay que darle también la clase que emite el shortcode. */ .siw-dental form.sw-contact.book { background: var(--brand-bg); border-radius: var(--brand-radius); padding: 38px 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .siw-dental form.sw-contact.book label { display: flex; flex-direction: column; gap: 8px; font: 500 14px/1 var(--brand-font); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-primary); } .siw-dental form.sw-contact.book input, .siw-dental form.sw-contact.book select, .siw-dental form.sw-contact.book textarea { border: 1px solid var(--brand-line); background: #fff; border-radius: 50px; padding: 14px 18px; font: 400 16px/1.4 var(--brand-font); color: var(--brand-text); width: 100%; text-transform: none; letter-spacing: normal; } .siw-dental form.sw-contact.book textarea { border-radius: var(--brand-radius); resize: vertical; min-height: 96px; } .siw-dental form.sw-contact.book .full { grid-column: 1 / -1; } .siw-dental form.sw-contact.book .sw-form-msg { margin: 0; font-size: 15px; color: var(--brand-primary); text-transform: none; letter-spacing: normal; } @media (max-width: 980px) { .siw-dental form.sw-contact.book { grid-template-columns: 1fr; } } /* ⚠️ Reparto de columnas en las secciones de dos columnas. En CSS Grid una columna `1.15fr` NO se encoge por debajo del ancho mínimo de su contenido: `min-width` vale `auto` por defecto. En la sección de antes/después el comparador (con su imagen dentro) reclamaba 736px, y la columna de texto se quedaba con 398 en vez de los 512 que le tocan — la izquierda salía estrecha y la comparación descentrada respecto al mockup. `minmax(0, Nfr)` permite que la columna baje de su contenido y el reparto sea el declarado. Medido: 398/736 → 512/692, que es exactamente el mockup. */ .siw-dental .grid[style*="fr"] > * { min-width: 0; } .siw-dental #results .sw-wrap { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .siw-dental .hero .sw-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .siw-dental .page-head .sw-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .siw-dental .faq-wrap, .siw-dental #faq .sw-wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } @media (max-width: 980px) { .siw-dental #results .sw-wrap, .siw-dental .hero .sw-wrap, .siw-dental .page-head .sw-wrap, .siw-dental #faq .sw-wrap { grid-template-columns: 1fr; } } /* ============================================================================ Cabecera y pie — alinearlos con el diseño ---------------------------------------------------------------------------- ⚠️ El header y el footer los pinta el THEME, así que quedan FUERA de `.siw-dental`. Como el CSS de este kit está acotado con ese prefijo, el `.sw-wrap` de 1300px del mockup no les llegaba: seguían con los 1140px del theme base y se veían 160px más estrechos que el cuerpo (medido: header 1140 / body 1300 / footer 1140). Se les da el mismo ancho, en páginas de este kit. ========================================================================== */ /* `:has()` limita el efecto a las páginas del kit dental: si el no contiene un .siw-dental, el header y el pie conservan el ancho del theme. */ /* ⚠️ Solo se toca el ANCHO. `padding: 0 20px` aplastaba el espaciado vertical que el theme da a estos contenedores (.sw-foot-grid lleva 52px arriba y 30 abajo), y el pie quedaba con el copyright pegado al borde inferior. Se usa padding-left/right para no pisar el vertical. */ /* espaciado del pie según el mockup: 70px arriba, 30px abajo */ /* ── Logo: el mockup escribe "BrightTeeth Dental" en caja mixta, con "Dental" en dorado. El theme lo pintaba en MAYÚSCULAS (ya corregido: ahora es text-transform, no strtoupper en PHP) y además añadía el subtítulo debajo. ⚠️ Aquí el subtítulo se OCULTA porque duplicaba la palabra: el nombre del sitio ya es "BrightTeeth Dental", así que salía "BRIGHTTEETH DENTAL Dental". El dorado de "Dental" lo da el ::after de más abajo. */ /* El subtítulo del theme se oculta y se reutiliza para pintar "Dental" en dorado JUNTO al nombre, como el mockup. Se hace con el propio (que ya contiene esa palabra) en vez de con ::after y contenido inventado: así el texto sigue viniendo del ajuste `logo_sub` y es traducible. */ /* ── Menú: el mockup lo encierra en una pastilla con borde y fondo blanco. */ /* ── Espacio sobre el hero: el mockup usa 70px, no los 100px de `section`. */ .siw-dental .hero { padding-top: 70px; } @media (max-width: 980px) { body:has(.siw-dental) .sw-nav-menu { border: 0; background: transparent; padding: 0; } } /* ⚠️ En el PIE el fondo es --brand-primary (marrón casi negro), así que el nombre heredaba ese mismo color y quedaba invisible: solo se leía "Dental" (que va en dorado). El theme ya tiene `.sw-footer .sw-name{color:on-primary}` pero la regla del kit, más específica, lo pisaba. */ /* ── Cabecera: medidas exactas del mockup ──────────────────────────────────── Medido contra el diseño, no a ojo: · logo 38x38 (el theme lo deja en 44 → salía más grande) · barra sin altura fija, con padding 14px (el theme fuerza 76px) · nav los
  • de wp_nav_menu no aportan altura, así que la pastilla quedaba más delgada que en el mockup */ /* la pastilla la forman