/* * single-ciudad.php — plantilla de página individual de ciudad. * * Paleta y tipografías tomadas de las variables globales de style.css * (--color-azul-oscuro/--color-azul-digital/--color-azul-cielo, * --font-universo) — mismo patrón de variables locales por sección que ya * usan #cobertura-section-ctx y .dr-colegas-section-container en este tema. * "--fuente-body: 'Universo', sans-serif" es intencional, no un error: esa * fuente no está cargada por @font-face (solo Literata lo está), así que cae * a sans-serif del sistema — el MISMO patrón exacto que ya usan esas dos * secciones existentes, no algo inventado aquí. */ #ciudad-page-ctx { --azul-oscuro: var(--color-azul-oscuro, #0a1444); --azul-digital: var(--color-azul-digital, #2c3fcd); --azul-cielo: var(--color-azul-cielo, #378de2); --bg-soft: #F4F8FB; --linea: rgba(10, 20, 68, 0.10); --muted: rgba(10, 20, 68, 0.62); --fuente-display: var(--font-universo, 'Literata', serif); --fuente-body: 'Universo', sans-serif; --fuente-mono: 'Space Mono', monospace; --ease: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); font-family: var(--fuente-body); color: var(--azul-oscuro); overflow-x: hidden; /* El header del sitio (#dtTopbar + #dtNav) es position:fixed y NO reserva espacio propio en el flujo normal del documento — #masthead (el wrapper estándar de WordPress que los contiene) mide height:0 porque todos sus hijos están fuera de flujo. Páginas construidas en Elementor lo compensan a mano, sección por sección, con su propio padding superior de diseño; una plantilla PHP plana como esta no tiene ese colchón, así que sin este padding-top el breadcrumb/hero quedarían tapados debajo del header. 120px cubre el stack medido en vivo (117px desktop, 113px mobile) con un pequeño margen. */ padding-top: 120px; } #ciudad-page-ctx, #ciudad-page-ctx *, #ciudad-page-ctx *::before, #ciudad-page-ctx *::after { box-sizing: border-box; } /* ===== ROMPER EL CONTENEDOR HEREDADO ("cortado tipo blog") ===== hello-elementor (tema padre) limita ".site-main" con max-width por breakpoint (500/600/800/1140px) en cualquier sin clase "elementor-page-*" — home.php ya lo neutraliza para el blog con ".blog .site-main{max-width:100%!important}" (style.css), pero single-ciudad.php nunca tenía el equivalente, así que TODO el contenido de la página (Elementor o el fallback de abajo) quedaba encajonado en esa columna angosta, sin importar el ancho que cada sección interna pidiera. Mismo criterio/mismo selector que la regla del blog, adaptado al body class que WordPress ya pone en toda entrada del CPT "ciudad" (body_class() -> "single-ciudad"). Sin esto, ".full-bleed" (style.css) no sirve de nada: 100vw calculado DENTRO de un ancestro ya limitado a 1140px no llega a cubrir la ventana completa. */ body.single-ciudad .site-main, body.single-ciudad .page-content, body.single-ciudad #content { max-width: 100% !important; width: 100% !important; } @keyframes ciudadFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes ciudadPing { 0% { box-shadow: 0 0 0 0 rgba(23,195,132,.55); } 70% { box-shadow: 0 0 0 8px rgba(23,195,132,0); } 100% { box-shadow: 0 0 0 0 rgba(23,195,132,0); } } /* ===== AVISO SOLO-ADMIN (fallback sin Elementor) ===== */ .ciudad-aviso-admin { margin: 0; padding: 10px clamp(1.25rem, 4vw, 3rem); background: rgba(234, 179, 8, .12); border-bottom: 1px solid rgba(234, 179, 8, .35); color: #92660a; font-size: .82rem; line-height: 1.5; text-align: center; } .ciudad-aviso-admin a { color: inherit; font-weight: 700; } /* ===== CONTENIDO DEL EDITOR CLÁSICO (fallback sin Elementor) ===== */ .ciudad-contenido-simple { padding: clamp(2rem, 5vw, 3.5rem) 0; } .ciudad-contenido-simple__ctn { max-width: 760px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); font-size: 1rem; line-height: 1.75; color: var(--azul-oscuro); } .ciudad-contenido-simple__ctn p { margin: 0 0 1.2em; } .ciudad-contenido-simple__ctn img { max-width: 100%; height: auto; border-radius: 16px; } /* ===== BREADCRUMB ===== */ .ciudad-breadcrumb { padding: 18px clamp(1.25rem, 4vw, 3rem); border-bottom: 1px solid var(--linea); background: #fff; } .ciudad-breadcrumb__in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); flex-wrap: wrap; } .ciudad-breadcrumb__in a { color: var(--azul-digital); text-decoration: none; font-weight: 600; } .ciudad-breadcrumb__in a:hover { text-decoration: underline; } .ciudad-breadcrumb__in span[aria-current] { color: var(--azul-oscuro); font-weight: 700; } .ciudad-breadcrumb__sep { opacity: .5; } /* ===== HERO ===== */ .ciudad-hero { position: relative; background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); padding: clamp(3rem, 7vw, 6rem) 0; overflow: hidden; } .ciudad-hero__grid-bg { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(10, 20, 68, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 20, 68, 0.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle at 30% 30%, black 10%, transparent 70%); -webkit-mask-image: radial-gradient(circle at 30% 30%, black 10%, transparent 70%); } .ciudad-hero__ctn { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); text-align: center; } .ciudad-hero__tag { font-family: var(--fuente-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--azul-digital); background: rgba(44,63,205,.07); border: 1px solid rgba(44,63,205,.2); padding: 6px 14px; border-radius: 100px; width: fit-content; margin: 0 auto 24px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; } .ciudad-hero__tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vital-green, #17c384); animation: ciudadPing 1.8s ease-out infinite; flex-shrink: 0; } .ciudad-hero__title { font-family: var(--fuente-display); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.15; margin: 0 0 1.1rem; color: var(--azul-oscuro); } .ciudad-hero__text { font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.65; color: var(--muted); margin: 0 auto 2.2rem; max-width: 560px; } /* ===== BOTONES ===== */ .ciudad-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font-weight: 700; font-size: 15px; padding: 15px 26px; text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .ciudad-btn svg { width: 16px; height: 16px; transition: transform .35s var(--spring); } .ciudad-btn:hover svg { transform: translateX(3px); } .ciudad-btn--primario { background: var(--azul-digital); color: #fff; box-shadow: 0 10px 22px -8px rgba(44,63,205,.5); } .ciudad-btn--primario:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -8px rgba(44,63,205,.6); } .ciudad-btn--claro { background: #fff; color: var(--azul-digital); box-shadow: 0 10px 22px -8px rgba(10,20,68,.15); } .ciudad-btn--claro:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -8px rgba(10,20,68,.22); } /* ===== STATS ===== */ .ciudad-stats { padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); } .ciudad-stats__grid { max-width: 1100px; margin: -2.5rem auto 0; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.25rem; } .ciudad-stat-card { background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 1.75rem 1.25rem; text-align: center; box-shadow: 0 10px 35px rgba(10,20,68,.05); animation: ciudadFadeUp .6s var(--ease) both; animation-delay: var(--card-delay, 0s); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .ciudad-stat-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(10,20,68,.1); border-color: rgba(44,63,205,.25); } .ciudad-stat-card__numero { display: block; font-family: var(--fuente-display); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; color: var(--azul-digital); } .ciudad-stat-card__etiqueta { display: block; margin-top: .35rem; font-size: .85rem; color: var(--muted); font-weight: 600; } /* ===== IMAGEN DESTACADA ===== Ancho completo del content wrapper (mismo max-width:1100px que especialidades/testimonios, no full-bleed a los bordes del viewport, para no romper el ritmo del resto de la página). object-fit:cover dentro de un aspect-ratio fijo es lo que evita el look "mochado": la imagen SIEMPRE llena el marco completo sin distorsionarse, sin importar sus proporciones originales — antes no había ningún contenedor pensado para esto (el campo se leía pero nunca se pintaba en la plantilla). */ .ciudad-imagen { padding: clamp(1rem, 3vw, 2rem) 0; } .ciudad-imagen__ctn { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); } .ciudad-imagen__marco { position: relative; width: 100%; aspect-ratio: 1600 / 640; border-radius: 24px; overflow: hidden; background: var(--bg-soft); box-shadow: 0 10px 35px rgba(10,20,68,.06); } .ciudad-imagen__img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 560px) { /* Panorámico 2.5:1 se ve demasiado bajo/recortado en pantallas angostas — más cuadrado deja ver mejor el contenido de la imagen en mobile. */ .ciudad-imagen__marco { aspect-ratio: 4 / 3; } } /* ===== VARIANTE FULL-BLEED (edge-to-edge del viewport) ===== .ciudad-imagen--full-bleed usa la utilidad .full-bleed (style.css) en vez del .ciudad-imagen__ctn contenido de arriba — mismo componente (.ciudad-imagen__marco/__img), sin contenedor de 1100px ni padding lateral, así que llega de verdad a los dos bordes de la ventana. Sin esquinas redondeadas (una imagen full-bleed con border-radius se ve como un error, no como una decisión de diseño) y un aspect-ratio más panorámico, ya que aquí no compite por espacio con un contenedor angosto. */ .ciudad-imagen--full-bleed .ciudad-imagen__marco { aspect-ratio: 2.4 / 1; border-radius: 0; } @media (max-width: 560px) { .ciudad-imagen--full-bleed .ciudad-imagen__marco { aspect-ratio: 4 / 3; } } /* ===== ESPECIALIDADES / TESTIMONIOS (misma estructura de contenedor) ===== */ .ciudad-especialidades { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--bg-soft); } .ciudad-testimonios { padding: clamp(3rem, 6vw, 5rem) 0; } .ciudad-especialidades__ctn, .ciudad-testimonios__ctn { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); } .ciudad-section-title { font-family: var(--fuente-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--azul-oscuro); text-align: center; margin: 0 0 2.5rem; } .ciudad-especialidades__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } .ciudad-esp-card { background: #fff; border: 1px solid var(--linea); border-radius: 24px; padding: 1.75rem; box-shadow: 0 10px 35px rgba(10,20,68,.03); animation: ciudadFadeUp .6s var(--ease) both; animation-delay: var(--card-delay, 0s); transition: var(--transition-smooth, all .4s cubic-bezier(.16,1,.3,1)); } .ciudad-esp-card:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(10,20,68,.1); border-color: rgba(44,63,205,.22); } .ciudad-esp-card__titulo { font-family: var(--fuente-display); font-size: 1.15rem; font-weight: 700; color: var(--azul-oscuro); margin: 0 0 .5rem; } .ciudad-esp-card__desc { font-size: .92rem; line-height: 1.6; color: var(--muted); margin: 0; } .ciudad-testimonios__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .ciudad-testimonio-card { background: #fff; border: 1px solid var(--linea); border-radius: 24px; padding: 1.75rem; box-shadow: 0 10px 35px rgba(10,20,68,.03); margin: 0; animation: ciudadFadeUp .6s var(--ease) both; animation-delay: var(--card-delay, 0s); transition: var(--transition-smooth, all .4s cubic-bezier(.16,1,.3,1)); } .ciudad-testimonio-card:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(10,20,68,.1); border-color: rgba(44,63,205,.22); } .ciudad-testimonio-card__cita { font-size: .98rem; line-height: 1.65; color: var(--azul-oscuro); margin: 0 0 1rem; font-style: italic; } .ciudad-testimonio-card__autor { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; } .ciudad-testimonio-card__autor strong { color: var(--azul-oscuro); font-weight: 700; } .ciudad-testimonio-card__autor span { color: var(--muted); } /* ===== CTA FINAL ===== */ .ciudad-cta-final { background: linear-gradient(155deg, #101c5e 0%, var(--azul-oscuro) 60%, #060b2c 100%); padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3rem); text-align: center; } .ciudad-cta-final__ctn { max-width: 640px; margin: 0 auto; } .ciudad-cta-final__titulo { font-family: var(--fuente-display); color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 700; margin: 0 0 .9rem; } .ciudad-cta-final__texto { color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.6; margin: 0 0 2rem; } @media (prefers-reduced-motion: reduce) { #ciudad-page-ctx * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }