/* Theme Name: La Cristianía · Tenis, Pádel y Pickleball Theme URI: https://iiced.online Author: Instituto de Innovación y Certificación Digital - IICED Author URI: https://iiced.online Description: Tema híbrido bilingüe para La Cristianía en Chapala. Version: 1.0.1 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 8.0 License: Proprietary Text Domain: la-cristiania Domain Path: /languages */ /* ═══════════════════════════════════════════════════════════════ LA CRISTIANÍA — Tenis, Pádel y Pickleball · Chapala, Jalisco Estilo activo: CLÁSICO (aprobado por los directivos 2026-07-23) Tipografía homologada: Space Grotesk (títulos) + Public Sans (cuerpo) ─────────────────────────────────────────────────────────────── */ :root{ /* Paleta CLÁSICA — estilo activo */ --bg:#f3efe7; --surface:#fdfcf9; --surface-2:#f7f4ed; --ink:#2b2926; --ink-soft:#5f5a51; --ink-mute:#948c7e; --line:#e2dac9; --line-2:#d8cfbd; --brand:#3f6b4f; /* verde cancha */ --brand-hi:#578a67; --brand-2:#8b7bb0; /* lila pádel */ --brand-3:#a9714e; /* terracota pickleball */ --footer:#232019; --footer-line:#45413a; --on-dark:#fdfcf9; --on-dark-soft:#a49c8c; --hero-veil:linear-gradient(90deg,rgba(28,26,23,.90) 0%,rgba(28,26,23,.72) 46%,rgba(28,26,23,.30) 100%); --shadow:0 22px 50px rgba(43,41,38,.14); --shadow-sm:0 3px 14px rgba(43,41,38,.09); --font-display:'Space Grotesk',system-ui,sans-serif; --font-body:'Public Sans',system-ui,sans-serif; --radius:18px; --radius-sm:12px; --maxw:1200px; } /* ─────────────────────────────────────────────────────────────── PRESET "MODERNO" — NO activo. Se conserva como semilla para el Personalizador de WordPress (decisión 2026-07-23). Para probarlo: . No hay selector en la interfaz. ─────────────────────────────────────────────────────────────── */ [data-theme="moderno"]{ --bg:#0a1729; --surface:#101f36; --surface-2:#14263f; --ink:#e8eef6; --ink-soft:#aebccd; --ink-mute:#7e8ea3; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16); --brand:#c6f24e; --brand-hi:#d8ff70; --brand-2:#a78bfa; --brand-3:#f0a76a; --footer:#060f1c; --footer-line:rgba(255,255,255,.10); --on-dark:#e8eef6; --on-dark-soft:#7e8ea3; --hero-veil:linear-gradient(90deg,rgba(10,23,41,.94) 0%,rgba(10,23,41,.76) 46%,rgba(10,23,41,.28) 100%); } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font-body);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.06;letter-spacing:-.015em} p{margin:0} img{max-width:100%;display:block} a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-hi)} :focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px} ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:20px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .section{padding:84px 0;scroll-margin-top:92px} .eyebrow{ font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:var(--brand);margin-bottom:14px; } .h2{font-size:clamp(29px,4.2vw,45px);font-weight:700} .lead{color:var(--ink-soft);font-size:17px;max-width:62ch;margin-top:14px} /* Bilingüe */ [data-lang="en"] .l-es{display:none!important} [data-lang="es"] .l-en{display:none!important} /* Botones */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:15px 26px;border-radius:999px;font-weight:700;font-size:15px; font-family:var(--font-display);border:1px solid transparent;cursor:pointer; transition:transform .18s ease,box-shadow .25s ease,background .18s ease; } .btn:hover{transform:translateY(-2px)} .btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 26px rgba(63,107,79,.28)} .btn-primary:hover{background:var(--brand-hi);color:#fff} .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)} .btn-ghost:hover{color:var(--ink);border-color:var(--brand)} .btn-onhero{background:rgba(253,252,249,.14);color:#fff;border-color:rgba(253,252,249,.34);backdrop-filter:blur(8px)} .btn-onhero:hover{background:rgba(253,252,249,.24);color:#fff} /* ══ HEADER ══ */ header{ position:sticky;top:0;z-index:60; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(14px);border-bottom:1px solid var(--line); } .hd{display:flex;align-items:center;gap:22px;padding:12px 24px;max-width:var(--maxw);margin:0 auto} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand img{width:69px;height:69px;border-radius:50%;object-fit:cover;border:2px solid var(--line-2);background:#fff} .brand-name{display:block;font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);line-height:1.1} .brand-sub{ display:block;font-size:9.5px;font-weight:600;color:var(--ink-mute); letter-spacing:.18em;text-transform:uppercase;margin-top:4px;line-height:1.1; } nav{display:flex;gap:26px;margin-left:auto} nav a{font-size:14px;font-weight:600;color:var(--ink-soft);transition:color .18s} nav a:hover{color:var(--brand)} .hd-actions{display:flex;align-items:center;gap:10px;margin-left:auto} nav+.hd-actions{margin-left:0} .lang{ display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px; border:1px solid var(--line-2);background:var(--surface);color:var(--ink); font-size:13px;font-weight:700;font-family:var(--font-display);cursor:pointer; } .lang:hover{border-color:var(--brand)} /* ══ HERO ══ */ .hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;overflow:hidden;background:#1c1a17} .hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%} .hero-poster{z-index:0} .hero-video{z-index:1} .hero-veil{position:absolute;inset:0;z-index:2;background:var(--hero-veil)} .hero-inner{position:relative;z-index:3;padding:76px 24px;max-width:var(--maxw);margin:0 auto;width:100%} .hero-tag{ display:inline-flex;align-items:center;gap:9px;padding:8px 17px;border-radius:999px; background:rgba(253,252,249,.13);border:1px solid rgba(253,252,249,.26); color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; backdrop-filter:blur(8px); } .hero-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-hi)} .hero h1{ color:#fff;font-size:clamp(35px,5.6vw,68px);font-weight:700; margin:24px 0 0;max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.3); } .hero h1 em{font-style:normal;color:#b9d8c3} .hero-sub{color:rgba(255,255,255,.9);font-size:17.5px;max-width:56ch;margin-top:20px;line-height:1.62} .hero-sub b{color:#fff} .hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px} .hero-stats{display:flex;gap:0;margin-top:52px;flex-wrap:wrap} .hero-stat{padding-right:34px;margin-right:34px;border-right:1px solid rgba(255,255,255,.22)} .hero-stat:last-child{border-right:0;margin-right:0;padding-right:0} .hero-stat b{display:block;font-family:var(--font-display);font-size:30px;font-weight:700;color:#fff;line-height:1} .hero-stat span{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:5px;display:block} /* ══ BANNER CLASE GRATIS ══ */ .banner{background:var(--brand);color:#fff;padding:22px 0} .banner-in{ max-width:var(--maxw);margin:0 auto;padding:0 24px; display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;text-align:center; } .banner b{font-family:var(--font-display);font-size:19px;font-weight:700} .banner span{color:rgba(255,255,255,.86);font-size:15px} .banner a{ background:#fff;color:var(--brand);padding:11px 22px;border-radius:999px; font-weight:700;font-size:14px;font-family:var(--font-display);white-space:nowrap; } .banner a span{color:var(--brand)} /* el texto del botón NO hereda el blanco del banner */ .banner a:hover{color:var(--brand);transform:translateY(-2px)} /* ══ DEPORTES ══ */ .sports{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px} .sport{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s; } .sport:hover{transform:translateY(-8px);box-shadow:var(--shadow)} .sport-img{position:relative;height:210px;background:var(--surface-2)} .sport-img img{width:100%;height:100%;object-fit:cover} /* Placeholder de marca para el deporte que aún no tiene foto propia (pádel: pendiente de la sesión de foto — ver seguimiento-campana.md) */ .sport-img.brandtile{ display:flex;align-items:center;justify-content:center; background:linear-gradient(145deg,var(--brand-2),#6d5d95);color:#fff; } .sport-img.brandtile svg{opacity:.92} .sport-count{ position:absolute;top:14px;left:14px;padding:6px 13px;border-radius:999px; background:rgba(253,252,249,.94);color:var(--ink);font-size:11.5px;font-weight:700; letter-spacing:.05em;text-transform:uppercase; } .sport-body{padding:24px} .sport-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .sport h3{font-size:25px;font-weight:700} .sport-price{font-family:var(--font-display);font-weight:700;font-size:15px;white-space:nowrap} .sport-price small{display:block;font-size:11px;font-weight:600;color:var(--ink-mute);text-align:right} .sport p{color:var(--ink-soft);font-size:14.6px;margin-top:12px} .sport-gallery{ width:100%;margin-top:20px;padding:11px 15px;border:1px solid var(--line-2);border-radius:999px; background:var(--surface-2);color:var(--ink);font:700 13px var(--font-display);cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:10px;transition:background .2s,border-color .2s,color .2s; } .sport-gallery::after{content:'↗';font-size:16px;color:var(--brand)} .sport-gallery:hover{background:var(--brand);border-color:var(--brand);color:#fff} .sport-gallery:hover::after{color:#fff} .extras{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:30px} .extra{ display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center; background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 12px; } .extra svg{color:var(--brand)} .extra span{font-size:13px;font-weight:600;color:var(--ink-soft);line-height:1.3} /* ══ POR QUÉ ══ */ .why{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start} .values{display:grid;gap:20px} .value{display:flex;gap:16px;align-items:flex-start} .value-ic{ flex-shrink:0;width:50px;height:50px;border-radius:14px; display:flex;align-items:center;justify-content:center; } .value h3{font-size:19px;font-weight:700;margin-bottom:5px} .value p{color:var(--ink-soft);font-size:14.8px} /* ══ TARIFAS ══ */ .rates{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;margin-top:44px;align-items:start} .card{ background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm); } .card h3{font-size:21px;font-weight:700;margin-bottom:6px} .card-note{font-size:13px;color:var(--ink-mute);margin-bottom:20px} .rate-head{ display:grid;grid-template-columns:1fr auto auto;gap:18px; padding-bottom:10px;border-bottom:1px solid var(--line); font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute); } .rate-head span:not(:first-child){text-align:right;min-width:74px} .rate{ display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center; padding:16px 0;border-bottom:1px solid var(--line); } .rate:last-child{border-bottom:0;padding-bottom:0} .rate-name{display:flex;align-items:center;gap:11px;font-weight:700;font-size:15.5px} .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} .rate-name small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-mute);margin-top:2px} .rate-val{ font-family:var(--font-display);font-weight:700;font-size:19px; text-align:right;min-width:74px; } .rate-val.night{color:var(--ink-soft);font-size:17px} .rate-foot{font-size:12.5px;color:var(--ink-mute);margin-top:18px;line-height:1.5} .classes{display:grid;gap:14px} .class-row{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding-bottom:14px;border-bottom:1px solid var(--line); } .class-row:last-of-type{border-bottom:0;padding-bottom:0} .class-row b{font-size:15.5px;font-weight:700} .class-row small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-mute);margin-top:2px} .class-ask{ font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--brand); white-space:nowrap;text-align:right; } .hours{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px;margin-top:24px} .hours h4{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:14px} .hour-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:14.5px} .hour-row b{font-weight:700} .hour-row span{color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums} /* ══ GALERÍA ══ */ .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;margin-top:40px} .gallery-tile{position:relative;margin:0;padding:0;overflow:hidden;border:0;border-radius:var(--radius-sm);background:var(--surface-2);cursor:pointer;color:#fff} .gallery-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .3s} .gallery-tile:hover img,.gallery-tile:focus-visible img{transform:scale(1.06);filter:saturate(1.08)} .gallery-kind{position:absolute;right:12px;bottom:12px;padding:6px 10px;border-radius:999px;background:rgba(26,24,21,.78);backdrop-filter:blur(8px);font:700 10px var(--font-display);letter-spacing:.08em;text-transform:uppercase} .g-tall{grid-row:span 2} .g-wide{grid-column:span 2} .g-full{grid-column:1 / -1} /* ══ POPUP MULTIMEDIA ══ */ .media-gallery{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:3vh 5vw;background:rgba(18,17,15,.88);backdrop-filter:blur(14px)} .media-gallery[hidden]{display:none} .gallery-dialog{position:relative;width:min(1120px,96vw);max-width:96vw;max-height:90dvh;overflow:auto;background:var(--surface);border:1px solid rgba(255,255,255,.12);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.45);scrollbar-width:thin;scrollbar-color:var(--brand) transparent} .gallery-dialog::-webkit-scrollbar{width:6px}.gallery-dialog::-webkit-scrollbar-thumb{background:var(--brand);border-radius:10px} .gallery-stage{display:grid;place-items:center;background:#151513;border-radius:22px 22px 0 0;overflow:hidden} .gallery-stage img,.gallery-stage video{display:block;width:100%;height:auto;max-height:min(65dvh,650px);object-fit:contain;background:#151513} .gallery-meta{display:grid;grid-template-columns:1fr auto;gap:10px 28px;padding:22px 76px 24px 28px} .gallery-title{font-size:clamp(22px,3vw,32px)} .gallery-description{grid-column:1;color:var(--ink-soft);font-size:14px} .gallery-counter{grid-column:2;grid-row:1 / span 2;align-self:center;font:700 13px var(--font-display);letter-spacing:.12em;color:var(--ink-mute)} .gallery-close,.gallery-nav{position:absolute;z-index:3;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-family:var(--font-display)} .gallery-close{right:18px;top:18px;width:44px;height:44px;background:rgba(253,252,249,.94);color:#201f1c;font-size:26px;box-shadow:var(--shadow-sm)} .gallery-nav{top:calc(50% - 42px);width:48px;height:48px;background:rgba(253,252,249,.92);color:#201f1c;font-size:26px;box-shadow:var(--shadow-sm)} .gallery-prev{left:18px}.gallery-next{right:18px} .gallery-media-error{color:#fff;text-align:center;padding:40px} /* ══ UBICACIÓN ══ */ .loc{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} .map{ border-radius:var(--radius);overflow:hidden;border:1px solid var(--line); box-shadow:var(--shadow-sm);height:400px;background:var(--surface-2); } .map iframe{width:100%;height:100%;border:0;display:block} .info-row{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)} .info-row:last-child{border-bottom:0} .info-row svg{color:var(--brand);flex-shrink:0;margin-top:2px} .info-row b{display:block;font-size:15px;font-weight:700} .info-row span{font-size:14px;color:var(--ink-soft)} /* ══ FOOTER ══ */ footer{background:var(--footer);color:var(--on-dark)} .ft{ max-width:var(--maxw);margin:0 auto;padding:44px 24px; display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap; } .ft-brand{display:flex;align-items:center;gap:13px} .ft-brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--footer-line);background:#fff} .ft-name{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--on-dark)} .ft-sub{font-size:12px;color:var(--on-dark-soft);margin-top:3px} .ft-links{display:flex;gap:22px;flex-wrap:wrap} .ft-links a{color:var(--on-dark-soft);font-size:14px;font-weight:600} .ft-links a:hover{color:var(--on-dark)} .ft-legal{ border-top:1px solid var(--footer-line); padding:18px 24px;text-align:center;font-size:12px;color:var(--on-dark-soft); } /* ══ WHATSAPP FLOTANTE ══ */ .wa-float{ position:fixed;right:22px;bottom:22px;z-index:70; width:58px;height:58px;border-radius:50%;background:#25d366; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 26px rgba(37,211,102,.44);transition:transform .2s; } .wa-float:hover{transform:scale(1.08)} /* ══ RESPONSIVE ══ */ @media (max-width:960px){ .section{padding:64px 0} nav{display:none} .sports{grid-template-columns:repeat(2,1fr)} .extras{grid-template-columns:repeat(3,1fr)} .why,.rates,.loc{grid-template-columns:1fr;gap:34px} .gallery{grid-template-columns:repeat(3,1fr);grid-auto-rows:170px} .hero{min-height:auto} .hero-inner{padding:60px 24px} } @media (max-width:640px){ .section{padding:52px 0} .wrap,.hd,.hero-inner,.ft{padding-left:18px;padding-right:18px} .hd{gap:12px} .brand-sub{display:none} .brand img{width:60px;height:60px} .brand-name{font-size:17px} /* El CTA del header pasa a icono; el texto lo cubre el botón flotante */ #ctaHeader{width:44px;height:44px;padding:0;border-radius:50%} #ctaHeader span{display:none!important} .lang{padding:8px 12px} .sports{grid-template-columns:1fr} .extras{grid-template-columns:repeat(2,1fr)} .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:132px} .g-wide{grid-column:span 1} .card{padding:22px} .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px} .hero-stat{padding-right:12px;margin-right:12px} .hero-stat b{font-size:23px} .hero-stat span{font-size:11.5px;line-height:1.3} .hero-cta .btn{flex:1 1 100%} .rate-head,.rate{grid-template-columns:1fr auto auto;gap:10px} .rate-val{font-size:17px;min-width:60px} .rate-head span:not(:first-child){min-width:60px} .wa-float{right:16px;bottom:16px;width:54px;height:54px} .media-gallery{padding:16px;align-items:center;justify-content:center} .gallery-dialog{width:min(96vw,100%);max-height:calc(100dvh - 32px);border-radius:20px} .gallery-stage{min-height:0;border-radius:20px 20px 0 0} .gallery-stage img,.gallery-stage video{height:auto;max-height:52dvh} .gallery-meta{padding:18px 22px 22px;grid-template-columns:1fr auto} .gallery-nav{display:none} .gallery-close{right:12px;top:12px} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .hero-video{display:none} } /* WordPress editorial templates */ .lc-editorial { width: min(100% - 40px, 1200px); min-height: 60vh; margin: 0 auto; padding: 72px 0; } .lc-editorial__content { width: min(100%, 760px); margin: 0 auto; } .lc-editorial__content > * + * { margin-top: 1.25rem; } .lc-editorial__content h1 { font-size: clamp(2rem, 5vw, 4rem); } .lc-editorial__meta { color: var(--ink-soft); margin: 12px 0 30px; } .lc-editorial img { height: auto; border-radius: var(--radius-sm); } .lc-pagination { margin-top: 42px; } .lc-search-form { display: flex; gap: 10px; margin-top: 24px; } .lc-search-form input { min-width: 0; flex: 1; padding: 12px; border: 1px solid var(--line); border-radius: 8px; } .lc-comments { width: min(100%, 760px); margin: 48px auto 0; } .teacher-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; } .teacher-card { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); } .banner .teacher-card > .l-es, .banner .teacher-card > .l-en { color: var(--ink-soft); } .teacher-card__actions { display: flex; gap: 12px; margin-top: 5px; font-size: 13px; font-weight: 700; } body:not(.home) header { position: sticky; top: 0; z-index: 20; } @media (max-width: 640px) { .lc-editorial { padding: 48px 0; } }