/* =========================================================== Fuentes alojadas en el propio servidor (2026-09-10) Antes venían de fonts.googleapis.com + fonts.gstatic.com: tres peticiones a dos dominios ajenos en el camino crítico. PageSpeed lo medía en 1.750 ms de bloqueo de render (FCP y LCP a 2,7 s) y CLS 0,167 por el salto de tipografía al llegar la fuente. Las dos son variables: un archivo cubre todos los pesos. Las rutas son relativas a ESTA hoja, que vive en la raíz. El precargado va en el de cada página y en los cuatro generadores, para que no se pierda al regenerar. Origen si hay que rehacerlas: fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Jost:wght@300;400;500 =========================================================== */ @font-face{ font-family:'Jost'; font-style:normal; font-weight:300 500; font-display:swap; src:url('fonts/jost-normal-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Jost'; font-style:normal; font-weight:300 500; font-display:swap; src:url('fonts/jost-normal-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Playfair Display'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/playfair-display-italic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Playfair Display'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/playfair-display-italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:400 500; font-display:swap; src:url('fonts/playfair-display-normal-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:400 500; font-display:swap; src:url('fonts/playfair-display-normal-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* =========================================================== Escuela de Danza Rocío Pozo · hoja de estilo Paleta: negro teatro + vino + rojo compás =========================================================== */ :root{ --negro: #0A0708; --negro-2: #110D0E; --negro-3: #1A1516; --vino: #3E0B12; --vino-claro: #5C1119; --rojo: #D9453F; --rojo-osc: #A81E24; --crema: #F7F3F0; --gris: #A79DA0; --gris-2: #6E6467; --linea: rgba(255,255,255,.10); --linea-2: rgba(255,255,255,.06); --display: "Playfair Display", "Iowan Old Style", Georgia, serif; --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --ancho: 1240px; --gutter: clamp(20px, 5vw, 64px); --radio: 4px; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } body{ margin:0; background:var(--negro); color:var(--crema); font-family:var(--sans); font-weight:300; font-size:clamp(15.5px, .55vw + 14px, 17px); line-height:1.72; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; } h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.08; margin:0; letter-spacing:-.01em; } p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; } .contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); } .saltar{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--rojo); color:#fff; padding:12px 20px; font-size:14px; } .saltar:focus{ left:16px; top:16px; } :focus-visible{ outline:2px solid var(--rojo); outline-offset:3px; } /* ---------- Tipografía de apoyo ---------- */ .eyebrow{ font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--rojo); margin:0 0 1.1rem; } .eyebrow--gris{ color:var(--gris-2); } .lead{ font-size:1.06rem; color:var(--gris); max-width:62ch; } .regla{ width:64px; height:2px; background:var(--rojo); border:0; margin:2rem 0; } /* ---------- Botones ---------- */ .btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--sans); font-weight:500; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; padding:1.05em 2.1em; border-radius:var(--radio); text-decoration:none; border:1px solid transparent; transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease; white-space:nowrap; } .btn:hover{ transform:translateY(-2px); } .btn--rojo{ background:linear-gradient(135deg,var(--rojo-osc),var(--rojo)); color:#fff; box-shadow:0 10px 30px -12px rgba(217,69,63,.65); } .btn--rojo:hover{ background:linear-gradient(135deg,#c0242a,#e2534c); } .btn--linea{ border-color:rgba(255,255,255,.28); color:var(--crema); background:transparent; } .btn--linea:hover{ border-color:var(--rojo); color:var(--rojo); } .enlace-flecha{ display:inline-flex; align-items:center; gap:.5em; color:var(--rojo); text-decoration:none; border-bottom:1px solid rgba(217,69,63,.4); padding-bottom:.25em; font-size:.95rem; transition:border-color .25s ease, gap .25s ease; } .enlace-flecha:hover{ border-color:var(--rojo); gap:.85em; } /* ---------- Cabecera ---------- */ .cabecera{ position:sticky; top:0; z-index:100; background:rgba(10,7,8,.82); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--linea-2); } .cabecera .contenedor{ max-width:1460px; } .cabecera__fila{ display:flex; align-items:center; gap:clamp(14px,1.8vw,28px); min-height:78px; } .marca{ display:flex; align-items:center; gap:.85rem; text-decoration:none; flex-shrink:0; } .marca picture{ display:block; } .marca__logo{ width:auto; height:42px; display:block; } .marca__logo--pie{ height:54px; } @media (max-width:600px){ .marca__logo{ height:34px; } } .cabecera__movil{ display:none; } .marca__txt{ display:flex; flex-direction:column; line-height:1.06; } .marca__sup{ font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gris); } .marca__nom{ font-family:var(--display); font-size:1.08rem; letter-spacing:.06em; text-transform:uppercase; } .nav{ display:flex; gap:clamp(12px,1.5vw,26px); margin-left:auto; } .nav a{ text-decoration:none; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap; color:var(--crema); opacity:.85; padding:.4em 0; position:relative; transition:opacity .2s, color .2s; } .nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--rojo); transition:right .3s ease; } .nav a:hover{ opacity:1; color:#fff; } .nav a:hover::after{ right:0; } .cabecera .btn{ padding:.9em 1.5em; font-size:.72rem; } /* ---------- Selector de idioma ---------- */ .visualmente-oculto{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .idiomas{ position:relative; flex-shrink:0; } .idiomas__b{ display:flex; align-items:center; gap:.5em; cursor:pointer; list-style:none; padding:.55em .85em; border:1px solid var(--linea); border-radius:var(--radio); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500; color:var(--gris); white-space:nowrap; transition:color .2s ease, border-color .2s ease, background .2s ease; } .idiomas__b::-webkit-details-marker{ display:none; } .idiomas__b:hover{ color:var(--crema); border-color:rgba(255,255,255,.28); } .idiomas[open] .idiomas__b{ color:var(--crema); border-color:rgba(217,69,63,.55); background:rgba(255,255,255,.05); } .idiomas__v{ width:10px; height:7px; transition:transform .25s ease; opacity:.7; } .idiomas[open] .idiomas__v{ transform:rotate(180deg); } .idiomas__menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:120; min-width:170px; margin:0; padding:.4rem; list-style:none; background:var(--negro-3); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:0 18px 44px -14px rgba(0,0,0,.85); } .idiomas__o{ display:block; padding:.7em .9em; border-radius:2px; font-size:.85rem; letter-spacing:.02em; text-transform:none; font-weight:300; color:var(--gris); text-decoration:none; white-space:nowrap; transition:color .18s ease, background .18s ease; } a.idiomas__o:hover{ color:var(--crema); background:rgba(255,255,255,.07); } .idiomas__o--activo{ color:var(--crema); background:rgba(217,69,63,.16); cursor:default; } /* En el menú móvil va desplegado y a lo ancho */ .cabecera__movil .idiomas{ margin-top:18px; } .cabecera__movil .idiomas__b{ justify-content:space-between; width:100%; padding:.85em 1em; } .cabecera__movil .idiomas__menu{ position:static; margin-top:.5rem; min-width:0; box-shadow:none; } @media (max-width:1240px){ .cabecera__fila > .idiomas{ display:none; } } @media (max-width: 1240px){ .nav{ display:none; } .menu-btn{ display:block; } .cabecera .btn--rojo{ display:none; } .cabecera__movil{ display:none; padding:0 0 22px; border-top:1px solid var(--linea-2); } .cabecera__movil.abierto{ display:block; } .cabecera__movil a{ display:block; padding:14px 0; text-decoration:none; border-bottom:1px solid var(--linea-2); font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; } .cabecera__movil .btn{ margin-top:18px; width:100%; justify-content:center; } .cabecera__movil .idiomas__o{ border-bottom:0; letter-spacing:.02em; text-transform:none; } } .menu-btn{ display:none; margin-left:auto; background:none; border:1px solid var(--linea); color:var(--crema); width:44px; height:44px; border-radius:var(--radio); cursor:pointer; font-size:18px; line-height:1; } /* ---------- Hero ---------- */ .hero{ position:relative; overflow:hidden; padding:clamp(56px,9vw,110px) 0 clamp(48px,7vw,86px); } .hero::before{ content:""; position:absolute; inset:0; background: radial-gradient(78% 92% at 78% 42%, var(--vino) 0%, rgba(62,11,18,.45) 42%, transparent 74%), linear-gradient(180deg, #150A0D 0%, var(--negro) 62%); z-index:-1; } .hero__grid{ display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(32px,5vw,72px); align-items:center; } .hero h1{ font-size:clamp(2.7rem, 5.1vw, 4.5rem); } .hero h1 .rojo{ color:var(--rojo); display:block; } .hero__foto{ position:relative; } .hero__foto img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 50%; border-radius:var(--radio); box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07); } .hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:2.2rem; } .hero__pistas{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,32px); margin-top:clamp(32px,4vw,52px); padding-top:clamp(26px,3vw,36px); border-top:1px solid var(--linea); } .hero__pista{ text-decoration:none; } .hero__pista svg{ width:26px; height:26px; stroke:var(--rojo); fill:none; stroke-width:1.4; margin-bottom:.85rem; } .hero__pista span{ display:block; font-size:.9rem; color:var(--gris); line-height:1.5; transition:color .2s; } .hero__pista:hover span{ color:var(--crema); } @media (max-width: 900px){ .hero__grid{ grid-template-columns:1fr; } .hero__foto img{ aspect-ratio:3/3.6; } .hero__foto{ max-width:420px; margin-top:8px; } .hero__pistas{ grid-template-columns:1fr; gap:18px; } .hero__pista{ display:flex; align-items:center; gap:14px; } .hero__pista svg{ margin-bottom:0; flex-shrink:0; } } /* ---------- Barra de confianza ---------- */ .confianza{ border-block:1px solid var(--linea-2); background:var(--negro-2); } .confianza__grid{ display:grid; grid-template-columns:repeat(4,1fr); } .confianza__item{ padding:clamp(26px,3.4vw,40px) clamp(14px,2vw,28px); border-left:1px solid var(--linea-2); } .confianza__item:first-child{ border-left:0; } .confianza__num{ font-family:var(--display); font-size:clamp(2rem,3.6vw,2.9rem); color:var(--rojo); line-height:1; } .confianza__txt{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); margin-top:.7rem; line-height:1.5; } @media (max-width: 760px){ .confianza__grid{ grid-template-columns:1fr 1fr; } .confianza__item:nth-child(3){ border-left:0; } .confianza__item:nth-child(n+3){ border-top:1px solid var(--linea-2); } } /* ---------- Secciones ---------- */ .seccion{ padding:clamp(64px,9vw,124px) 0; } .seccion--alt{ background:var(--negro-2); } .seccion__cab{ max-width:720px; margin-bottom:clamp(36px,5vw,64px); } .seccion__cab--centro{ margin-inline:auto; text-align:center; } .seccion__cab h1, .seccion__cab h2{ font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:1.1rem; } /* ---------- Ficha rápida ---------- */ .ficha{ border:1px solid var(--linea); border-radius:var(--radio); background:linear-gradient(160deg, rgba(62,11,18,.30), rgba(255,255,255,.02)); padding:clamp(28px,4vw,48px); } .ficha dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(20px,3vw,36px); margin:0; } .ficha dt{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rojo); margin-bottom:.5rem; } .ficha dd{ margin:0; font-size:.98rem; color:var(--crema); line-height:1.6; } .ficha dd a{ color:var(--crema); text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px; } .ficha dd a:hover{ color:var(--rojo); } /* ---------- Sobre Rocío ---------- */ .sobre__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:center; } .sobre__foto img{ border-radius:var(--radio); box-shadow:0 30px 70px -28px rgba(0,0,0,.9); } .sobre__cita{ font-family:var(--display); font-style:italic; font-size:clamp(1.2rem,2.1vw,1.55rem); line-height:1.5; color:var(--crema); border-left:2px solid var(--rojo); padding-left:1.4rem; margin:2rem 0; } .credenciales{ list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.9rem; } .credenciales li{ position:relative; padding-left:1.7rem; font-size:.96rem; color:var(--gris); } .credenciales li::before{ content:"◆"; position:absolute; left:0; top:-.05em; color:var(--rojo); font-size:.7rem; } .credenciales strong{ color:var(--crema); font-weight:400; } @media (max-width: 880px){ .sobre__grid{ grid-template-columns:1fr; } .sobre__foto{ max-width:420px; } } /* ---------- Tarjetas de disciplina ---------- */ .disciplinas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,2.4vw,30px); } .disciplina{ display:flex; flex-direction:column; border:1px solid var(--linea); border-radius:var(--radio); background:var(--negro-3); overflow:hidden; transition:border-color .3s ease, transform .3s ease; } .disciplina:hover{ border-color:rgba(217,69,63,.55); transform:translateY(-4px); } .disciplina--destaca{ border-color:rgba(217,69,63,.5); box-shadow:0 0 0 1px rgba(217,69,63,.18) inset; } .disciplina__img{ aspect-ratio:4/3; overflow:hidden; } .disciplina__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; } .disciplina:hover .disciplina__img img{ transform:scale(1.05); } .disciplina__cuerpo{ padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; flex:1; } .etiqueta{ display:inline-block; align-self:flex-start; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rojo); border:1px solid rgba(217,69,63,.45); border-radius:2px; padding:.4em .8em; margin-bottom:1rem; } .disciplina h3{ font-size:1.6rem; margin-bottom:.85rem; } .disciplina p{ font-size:.94rem; color:var(--gris); } .grupos{ list-style:none; padding:0; margin:1.4rem 0 1.8rem; display:grid; gap:.75rem; } .grupos li{ position:relative; padding-left:1.35rem; font-size:.88rem; color:var(--gris); line-height:1.55; } .grupos li::before{ content:"✦"; position:absolute; left:0; top:0; color:var(--rojo); font-size:.72rem; } .grupos strong{ color:var(--crema); font-weight:400; } .disciplina .btn{ margin-top:auto; justify-content:center; } .disciplina__enlace{ text-decoration:none; color:inherit; } .disciplina__enlace:hover{ color:var(--rojo); } .disciplina__mas{ align-self:flex-start; margin-top:1rem; font-size:.85rem; } /* ---------- Horarios ---------- */ .tabla-envoltura{ overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio); } table.horarios{ width:100%; border-collapse:collapse; min-width:760px; font-size:.88rem; } table.horarios caption{ text-align:left; padding:0 0 1rem; color:var(--gris); font-size:.9rem; } table.horarios th, table.horarios td{ padding:1rem 1.15rem; text-align:left; border-bottom:1px solid var(--linea-2); vertical-align:top; } table.horarios thead th{ background:var(--negro-3); font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gris); } table.horarios tbody th{ font-family:var(--sans); font-weight:400; color:var(--rojo); white-space:nowrap; font-size:.86rem; } table.horarios td{ color:var(--gris); } table.horarios td.ocupado{ color:var(--crema); } table.horarios td.taller{ background:rgba(217,69,63,.07); border-left:2px solid rgba(217,69,63,.45); vertical-align:middle; } table.horarios tbody tr:hover{ background:rgba(255,255,255,.025); } table.horarios tbody tr:last-child th, table.horarios tbody tr:last-child td{ border-bottom:0; } .edad{ display:block; font-size:.76rem; color:var(--gris-2); margin-top:.15rem; } /* ---------- Banda del curso online ---------- */ .banda{ border:1px solid var(--linea); border-radius:var(--radio); background:linear-gradient(120deg, var(--vino) 0%, var(--negro-3) 58%); padding:clamp(30px,4.4vw,56px); display:grid; grid-template-columns:1fr auto; gap:clamp(24px,3vw,48px); align-items:center; } .banda h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:.9rem; } .banda p{ color:var(--gris); max-width:56ch; } @media (max-width: 800px){ .banda{ grid-template-columns:1fr; } } /* ---------- Ubicación ---------- */ .ubicacion__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; } .mapa{ border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; aspect-ratio:4/3; background:var(--negro-3); } .mapa iframe{ width:100%; height:100%; border:0; filter:invert(.92) hue-rotate(180deg) saturate(.55) contrast(.92); } .datos{ list-style:none; padding:0; margin:0; display:grid; gap:1.6rem; } .datos dd{ margin:0; } .datos dt, .datos__et{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rojo); margin-bottom:.45rem; } .datos__val{ font-size:1.02rem; } .datos__val a{ color:var(--crema); text-decoration:none; border-bottom:1px solid var(--linea); } .datos__val a:hover{ color:var(--rojo); border-color:var(--rojo); } @media (max-width: 860px){ .ubicacion__grid{ grid-template-columns:1fr; } } /* ---------- Galería ---------- */ .galeria{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(14px,1.8vw,22px); } .galeria img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radio); filter:brightness(.92); transition:filter .4s ease, transform .5s ease; } .galeria a:hover img{ filter:brightness(1.05); transform:scale(1.02); } /* ---------- Testimonios ---------- */ .testimonios{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,30px); max-width:1000px; margin-inline:auto; } @media (max-width:700px){ .testimonios{ grid-template-columns:1fr; } } .testimonio{ border:1px solid var(--linea); border-radius:var(--radio); padding:clamp(24px,3vw,34px); background:var(--negro-3); } .testimonio blockquote{ margin:0 0 1.4rem; font-size:.96rem; color:var(--gris); line-height:1.7; } .testimonio blockquote::before{ content:"“"; font-family:var(--display); font-size:3rem; color:var(--rojo); line-height:0; display:block; margin-bottom:1.2rem; } .estrellas{ color:#F0B429; letter-spacing:.16em; font-size:.95rem; display:inline-block; } .testimonio .estrellas{ margin-bottom:1.1rem; } .nota-google{ margin-top:1.6rem; color:var(--gris); font-size:.95rem; display:flex; gap:.6rem; align-items:center; justify-content:center; flex-wrap:wrap; } .nota-google strong{ color:var(--crema); font-weight:400; } .nota-google a{ color:var(--rojo); text-decoration:none; border-bottom:1px solid rgba(217,69,63,.4); } .nota-google a:hover{ border-color:var(--rojo); } .testimonio cite{ font-style:normal; font-size:.86rem; color:var(--crema); } .testimonio cite span{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-2); margin-top:.3rem; } /* ---------- FAQ ---------- */ .faq{ max-width:900px; margin-inline:auto; } .faq details{ border-bottom:1px solid var(--linea); } .faq summary{ cursor:pointer; list-style:none; padding:1.5rem 3rem 1.5rem 0; position:relative; font-family:var(--display); font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.4; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; position:absolute; right:.35rem; top:50%; transform:translateY(-50%); color:var(--rojo); font-family:var(--sans); font-size:1.5rem; font-weight:300; transition:transform .3s ease; } .faq details[open] summary::after{ content:"–"; } .faq summary:hover{ color:var(--rojo); } .faq__resp{ padding:0 3rem 1.7rem 0; color:var(--gris); font-size:.97rem; } .faq__resp a{ color:var(--rojo); } /* ---------- CTA final ---------- */ .cta-final{ position:relative; text-align:center; padding:clamp(72px,10vw,132px) 0; overflow:hidden; } .cta-final::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 100% at 50% 0%, var(--vino-claro) 0%, var(--vino) 30%, var(--negro) 78%); } .cta-final h2{ font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:1.2rem; } .cta-final p{ color:var(--gris); max-width:56ch; margin-inline:auto; } .cta-final__botones{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:2.4rem; } /* ---------- Pie ---------- */ .pie{ background:var(--negro-2); border-top:1px solid var(--linea-2); padding:clamp(48px,6vw,76px) 0 32px; font-size:.9rem; } .pie__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,52px); } .pie h3{ font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rojo); margin-bottom:1.2rem; } .pie ul{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; } .pie a{ color:var(--gris); text-decoration:none; transition:color .2s; } .pie a:hover{ color:var(--crema); } .pie p{ color:var(--gris); font-size:.9rem; } .pie address{ font-style:normal; color:var(--gris); line-height:1.8; } .pie__legal{ margin-top:clamp(36px,5vw,60px); padding-top:26px; border-top:1px solid var(--linea-2); display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--gris-2); } .pie__legal a{ color:var(--gris-2); } .pie__feder{ margin-top:28px; } .pie__feder img{ max-width:520px; opacity:.75; } .pie__feder small{ display:block; color:var(--gris-2); font-size:.72rem; margin-top:.8rem; } .redes{ display:flex; gap:14px; margin-top:1.2rem; } .redes a{ width:38px; height:38px; border:1px solid var(--linea); border-radius:var(--radio); display:grid; place-items:center; transition:border-color .25s, color .25s; } .redes a:hover{ border-color:var(--rojo); color:var(--rojo); } .redes svg{ width:17px; height:17px; fill:currentColor; } @media (max-width: 900px){ .pie__grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 560px){ .pie__grid{ grid-template-columns:1fr; } } /* ---------- WhatsApp ---------- */ .btn__wa{ width:1.15em; height:1.15em; fill:currentColor; flex-shrink:0; } .wa-tarjeta{ display:flex; align-items:center; gap:1.1rem; padding:1.2rem 1.4rem; margin-bottom:2.2rem; border:1px solid rgba(37,211,102,.35); border-radius:var(--radio); background:linear-gradient(120deg, rgba(37,211,102,.10), rgba(255,255,255,.02)); text-decoration:none; transition:border-color .25s ease, background .25s ease, transform .25s ease; } .wa-tarjeta:hover{ border-color:rgba(37,211,102,.75); background:linear-gradient(120deg, rgba(37,211,102,.18), rgba(255,255,255,.03)); transform:translateY(-2px); } .wa-tarjeta__icono{ width:46px; height:46px; border-radius:50%; background:#25D366; display:grid; place-items:center; flex-shrink:0; } .wa-tarjeta__icono svg{ width:25px; height:25px; fill:#0A0708; } .wa-tarjeta__txt{ display:flex; flex-direction:column; gap:.2rem; } .wa-tarjeta__txt strong{ font-weight:400; color:var(--crema); font-size:1.02rem; } .wa-tarjeta__txt span{ color:var(--gris); font-size:.85rem; line-height:1.45; } .wa-tarjeta__flecha{ margin-left:auto; color:#25D366; font-size:1.25rem; } @media (max-width:520px){ .wa-tarjeta{ align-items:flex-start; } .wa-tarjeta__flecha{ display:none; } } .wa-flotante{ position:fixed; right:20px; bottom:20px; z-index:90; height:56px; border-radius:28px; padding:0 6px; display:flex; align-items:center; background:#25D366; box-shadow:0 12px 32px -8px rgba(0,0,0,.7); transition:transform .25s ease; } .wa-flotante svg{ width:29px; height:29px; fill:#fff; margin:0 7px; flex-shrink:0; } .wa-flotante__etiqueta{ color:#062d16; font-size:.8rem; font-weight:500; letter-spacing:.02em; max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .35s ease, opacity .25s ease, padding .35s ease; } .wa-flotante:hover .wa-flotante__etiqueta, .wa-flotante:focus-visible .wa-flotante__etiqueta{ max-width:190px; opacity:1; padding-right:12px; } @media (min-width: 1241px){ .wa-flotante{ right:28px; bottom:28px; } } @media (max-width:600px){ .wa-flotante__etiqueta{ display:none; } } /* ---------- Tarifas ---------- */ .tarifas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,1.8vw,20px); } .tarifa{ display:flex; flex-direction:column; gap:.5rem; border:1px solid var(--linea); border-radius:var(--radio); background:var(--negro-3); padding:clamp(22px,2.6vw,30px); transition:border-color .3s ease, transform .3s ease; } .tarifa:hover{ border-color:rgba(217,69,63,.5); transform:translateY(-3px); } .tarifa--matricula{ background:linear-gradient(150deg, rgba(62,11,18,.55), var(--negro-3)); border-color:rgba(217,69,63,.4); } .tarifa__et{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rojo); } .tarifa__precio{ font-family:var(--display); font-size:clamp(2.1rem,3.4vw,2.7rem); line-height:1; color:var(--crema); } .tarifa__precio small{ font-family:var(--sans); font-size:.9rem; font-weight:300; color:var(--gris); letter-spacing:.02em; } .tarifa__nota{ font-size:.85rem; color:var(--gris); line-height:1.5; } .letra-pequena{ margin-top:clamp(28px,3.4vw,44px); padding-top:clamp(24px,3vw,34px); border-top:1px solid var(--linea); display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,2.6vw,36px); } .letra-pequena p{ font-size:.88rem; color:var(--gris); line-height:1.65; } .letra-pequena strong{ color:var(--crema); font-weight:400; } .letra-pequena a{ color:var(--rojo); } /* ---------- Páginas interiores ---------- */ .miga{ border-bottom:1px solid var(--linea-2); background:var(--negro-2); } .miga .contenedor{ padding-block:.9rem; font-size:.78rem; letter-spacing:.06em; color:var(--gris-2); } .miga a{ color:var(--gris); text-decoration:none; } .miga a:hover{ color:var(--rojo); } .miga span[aria-hidden]{ margin-inline:.5rem; color:var(--gris-2); } .hero--interior{ padding-block:clamp(44px,6vw,84px); } .hero--interior h1{ font-size:clamp(2.3rem,4.4vw,3.7rem); } .hero--interior h1 .rojo{ color:var(--rojo); display:block; } .hero--interior .hero__foto img{ aspect-ratio:4/3; object-fit:cover; } @media (max-width:900px){ .hero--interior .hero__foto{ max-width:none; } } .bloques{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(20px,2.6vw,34px); } .bloque h3{ font-size:1.3rem; margin-bottom:.7rem; } .bloque h3::before{ content:"◆"; color:var(--rojo); font-size:.6rem; vertical-align:middle; margin-right:.6rem; } .bloque p{ font-size:.94rem; color:var(--gris); } table.horarios--grupo{ min-width:520px; } table.horarios--grupo tbody th{ color:var(--crema); font-size:.95rem; white-space:normal; } table.horarios--grupo tbody th .edad{ color:var(--gris-2); } .relacionadas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(16px,2vw,24px); } .rel{ display:flex; flex-direction:column; gap:.5rem; text-decoration:none; border:1px solid var(--linea); border-radius:var(--radio); padding:clamp(22px,2.6vw,30px); background:var(--negro-3); transition:border-color .3s ease, transform .3s ease; } .rel:hover{ border-color:rgba(217,69,63,.55); transform:translateY(-3px); } .rel__t{ font-family:var(--display); font-size:1.25rem; color:var(--crema); } .rel__t::after{ content:" →"; color:var(--rojo); } .rel__d{ font-size:.9rem; color:var(--gris); } /* ---------- Blog: índice ---------- */ .chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.8rem; } .chip{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); border:1px solid var(--linea); border-radius:100px; padding:.5em 1em; } .chip b{ color:var(--rojo); font-weight:500; } .posts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(20px,2.4vw,32px); } .post{ display:flex; flex-direction:column; border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; background:var(--negro-3); transition:border-color .3s ease, transform .3s ease; } .post:hover{ border-color:rgba(217,69,63,.5); transform:translateY(-4px); } .post__img{ display:block; aspect-ratio:4/3; overflow:hidden; } .post__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; } .post:hover .post__img img{ transform:scale(1.04); } .post__cuerpo{ padding:clamp(20px,2.4vw,26px); display:flex; flex-direction:column; flex:1; } .post h3{ font-size:1.22rem; line-height:1.28; margin-bottom:.8rem; } .post h3 a{ text-decoration:none; color:var(--crema); } .post h3 a:hover{ color:var(--rojo); } .post p{ font-size:.9rem; color:var(--gris); } .post__meta{ margin-top:auto; padding-top:1.2rem; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-2); } /* ---------- Blog: artículo ---------- */ .contenedor--lectura{ max-width:760px; } .articulo{ padding-top:clamp(40px,5vw,72px); } .articulo__cab h1{ font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.12; margin-bottom:1.3rem; } .articulo__meta{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-2); margin-bottom:1.6rem; } .articulo__entradilla{ font-size:1.12rem; color:var(--gris); line-height:1.65; } .articulo__foto{ margin:clamp(32px,4vw,52px) 0; } .articulo__foto img{ width:100%; border-radius:var(--radio); box-shadow:0 30px 70px -34px rgba(0,0,0,.9); } .prosa{ font-size:1.03rem; line-height:1.82; color:#D8D0D2; } .prosa h2{ font-size:clamp(1.55rem,2.8vw,2.05rem); margin:2.6em 0 .8em; color:var(--crema); padding-top:1.2rem; border-top:1px solid var(--linea-2); } .prosa h2:first-child{ margin-top:0; border-top:0; padding-top:0; } .prosa h3{ font-size:clamp(1.2rem,2vw,1.4rem); margin:2em 0 .6em; color:var(--crema); } .prosa h3::before{ content:"◆"; color:var(--rojo); font-size:.55em; vertical-align:middle; margin-right:.7rem; } .prosa p{ margin:0 0 1.35em; } .prosa strong{ color:var(--crema); font-weight:400; } .prosa em{ color:var(--crema); } .prosa a{ color:var(--rojo); text-decoration:none; border-bottom:1px solid rgba(217,69,63,.4); } .prosa a:hover{ border-color:var(--rojo); } .prosa ul{ margin:0 0 1.5em; padding-left:0; list-style:none; } .prosa li{ position:relative; padding-left:1.6rem; margin-bottom:.7em; } .prosa li::before{ content:"—"; position:absolute; left:0; color:var(--rojo); } .prosa .tabla-envoltura{ margin:2em 0; } .prosa blockquote{ margin:1.8em 0; padding:1.4rem 1.6rem; border-left:2px solid var(--rojo); border-radius:0 var(--radio) var(--radio) 0; background:rgba(255,255,255,.03); } .prosa blockquote p{ margin:0 0 .9em; color:var(--crema); font-style:italic; } .prosa blockquote footer{ font-size:.78rem; letter-spacing:.06em; color:var(--gris-2); font-style:normal; } .prosa blockquote footer a{ color:var(--gris); border-bottom-color:rgba(255,255,255,.2); } .prosa blockquote footer a:hover{ color:var(--rojo); border-bottom-color:var(--rojo); } .cta-articulo{ margin:clamp(48px,6vw,80px) 0 clamp(20px,3vw,40px); border:1px solid rgba(217,69,63,.35); border-radius:var(--radio); background:linear-gradient(140deg, rgba(62,11,18,.5), rgba(255,255,255,.02)); padding:clamp(28px,3.6vw,44px); } .cta-articulo h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); margin-bottom:.9rem; } .cta-articulo p{ color:var(--gris); } .cta-articulo .hero__ctas{ margin-top:1.8rem; } /* ---------- Aviso flotante de la compañía ---------- */ .promo-cia{ position:fixed; left:20px; bottom:20px; z-index:95; width:min(280px, calc(100vw - 40px)); background:linear-gradient(155deg, var(--vino) 0%, var(--negro-3) 62%); border:1px solid rgba(217,69,63,.42); border-radius:var(--radio); padding:1.5rem 1.4rem 1.4rem; box-shadow:0 24px 60px -20px rgba(0,0,0,.85); opacity:0; transform:translateY(14px) scale(.97); transition:opacity .35s ease, transform .35s ease; } .promo-cia--visible{ opacity:1; transform:none; } .promo-cia__logo{ width:150px; height:auto; margin-bottom:1.1rem; } .promo-cia__t{ font-family:var(--sans); font-weight:500; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rojo); margin:0 0 .6rem; } .promo-cia__d{ font-size:.85rem; line-height:1.55; color:var(--gris); margin:0 0 1.3rem; } .promo-cia__btn{ display:flex; align-items:center; justify-content:center; gap:.5em; background:linear-gradient(135deg,var(--rojo-osc),var(--rojo)); color:#fff; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500; padding:.95em 1.2em; border-radius:var(--radio); text-decoration:none; transition:transform .25s ease, background .25s ease; } .promo-cia__btn:hover{ transform:translateY(-2px); background:linear-gradient(135deg,#c0242a,#e2534c); } .promo-cia__btn svg{ width:13px; height:13px; flex-shrink:0; } .promo-cia__x{ position:absolute; top:8px; right:8px; width:30px; height:30px; background:none; border:0; color:var(--gris); font-size:22px; line-height:1; cursor:pointer; border-radius:50%; transition:color .2s, background .2s; } .promo-cia__x:hover{ color:var(--crema); background:rgba(255,255,255,.08); } /* En móvil se apila sobre el botón de WhatsApp, sin taparlo */ @media (max-width:640px){ .promo-cia{ left:12px; right:auto; bottom:86px; width:min(250px, calc(100vw - 90px)); padding:1.2rem 1.1rem 1.1rem; } .promo-cia__logo{ width:120px; margin-bottom:.9rem; } .promo-cia__d{ font-size:.8rem; margin-bottom:1rem; } } @media (prefers-reduced-motion: reduce){ .promo-cia{ transition:opacity .01ms; transform:none; } }