/* ------------------------------------------------------------ TIPOGRAFÍA - Títulos: "the-seasons", servida por Adobe Fonts / Typekit ( en el de cada página — trae los pesos 300/400/700 normal e itálica). Ya NO se usa el archivo suelto que había subido el cliente (fonts/TheSeasons-Regular.ttf, con licencia dudosa y apenas 95 glifos); ese archivo quedó sin uso en /fonts/. - "Josefin Sans": el resto del texto (body, nav, botones, etc.), autohospedada en /fonts/, fuente variable (cubre los pesos 100-700 y su itálica en 2 archivos). Red de seguridad de glifos: si Typekit no llega a cargar (ej. el dominio no está autorizado en el kit, o se está probando el sitio en local con file:// en vez del dominio real), "the-seasons" cae directo a Playfair Display / Georgia — que si tienen tildes, Ñ, ¿¡, etc. Igual se dejó un @font-face de relleno con el mismo nombre "the-seasons", acotado por unicode-range a esos caracteres puntuales (tildes, Ñ, ¿¡, rayas, punto medio) usando el subset "latin" de Playfair Display bajado de Google Fonts — por si la versión que sirve el kit de Typekit resultara tener el mismo problema que el archivo original. ------------------------------------------------------------- */ @font-face { font-family: "the-seasons"; src: url('fonts/PlayfairDisplay-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+00A0-00FF, U+2000-206F; } @font-face { font-family: 'Josefin Sans'; src: url('fonts/JosefinSans-Variable.ttf') format('truetype'); font-weight: 100 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Josefin Sans'; src: url('fonts/JosefinSans-Italic-Variable.ttf') format('truetype'); font-weight: 100 700; font-style: italic; font-display: swap; } :root{ --black: #0a0a0a; --white: #ffffff; --off-white: #f6f5f3; --gray-line: #2222221a; --gray-text: #4a4a4a; --serif: "the-seasons", 'Playfair Display', Georgia, serif; --sans: 'Josefin Sans', sans-serif; --font-titulos: "the-seasons", 'Playfair Display', Georgia, serif; --line: rgba(10,10,10,0.16); --line-strong: rgba(10,10,10,0.4); --muted: rgba(10,10,10,0.62); --gutter: clamp(24px, 6vw, 96px); --section-y: clamp(64px, 9vw, 128px); } *{ box-sizing: border-box; margin:0; padding:0; } html{ scroll-behavior: smooth; } body{ font-family: var(--sans); color: var(--black); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } .container{ max-width: 1140px; margin: 0 auto; padding: 0 24px; } /* Logo en blanco (footers con fondo negro): logohs.png es negro sobre transparente, así que se invierte por CSS en vez de pedir un segundo archivo. */ .footer-logo-img{ height: 32px; width:auto; filter: brightness(0) invert(1); } section{ padding: 96px 0; } h1,h2,h3,h4{ font-family: var(--font-titulos); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; } .eyebrow{ font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.25em; font-size: 12px; font-weight: 600; color: var(--black); } .btn{ display: inline-block; padding: 16px 40px; border: 1px solid var(--black); background: var(--black); color: var(--white); font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.15em; font-size: 13px; font-weight: 600; transition: all .25s ease; cursor: pointer; } .btn:hover{ background: var(--white); color: var(--black); } .btn-outline{ background: transparent; color: var(--white); border-color: var(--white); } .btn-outline:hover{ background: var(--white); color: var(--black); } .btn-dark-outline{ background: transparent; color: var(--black); border-color: var(--black); } .btn-dark-outline:hover{ background: var(--black); color: var(--white); } /* ============================================================ HEADER — idéntico en las 4 páginas (index, formación, abrí tu head spa, analizadores). Sin prefijo de página a propósito: es el único bloque de diseño que se pidió unificar del todo. ============================================================ */ header{ position: sticky; top:0; z-index: 100; background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--gray-line); backdrop-filter: blur(6px); } .nav-wrap{ max-width: 1180px; margin: 0 auto; padding: 18px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .nav-wrap .logo img{ height: 34px; width:auto; display:block; } .nav-links{ display:flex; gap: 36px; list-style:none; } .nav-links a{ font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; } .nav-links a:hover{ opacity: .55; } .nav-links a[aria-current="page"]{ border-bottom: 1px solid var(--black); padding-bottom: 4px; } .menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:4px; } .menu-toggle span{ display:block; width:24px; height:1px; background:var(--black); position:relative; } .menu-toggle span::before, .menu-toggle span::after{ content:''; position:absolute; width:24px; height:1px; background:var(--black); left:0; } .menu-toggle span::before{ top:-8px; } .menu-toggle span::after{ top:8px; } @media (max-width: 860px){ .nav-links{ position:fixed; top:71px; left:0; right:0; background:var(--white); flex-direction:column; gap:0; border-top:1px solid var(--gray-line); border-bottom:1px solid var(--gray-line); max-height:0; overflow:hidden; transition:max-height .3s ease; } .nav-links.open{ max-height:400px; } .nav-links li{ width:100%; } .nav-links a{ display:block; padding:18px 24px; border-bottom:1px solid var(--gray-line); } .menu-toggle{ display:block; } } /* HERO */ .hero{ position: relative; min-height: 92vh; display:flex; align-items:center; color: var(--white); overflow: hidden; } .hero-bg{ position: absolute; inset: 0; z-index: 0; background: var(--black); display:flex; align-items:center; justify-content:center; } .hero-bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(100deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.55) 42%, rgba(10,10,10,.15) 70%); } .hero-bg img{ width:100%; height:100%; object-fit:cover; } .hero-bg-label{ position: relative; z-index: 1; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: #ffffff55; border: 1px dashed #ffffff33; padding: 10px 18px; } .hero-grid{ position: relative; z-index: 2; display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items:center; padding-top: 120px; padding-bottom: 80px; width: 100%; } .hero-text{ max-width: 540px; } .hero .eyebrow{ color: var(--white); opacity: .85; } .hero h1{ font-size: clamp(32px, 4vw, 50px); line-height: 1.2; margin: 18px 0 22px; } .hero-break{ display:none; } .hero-nowrap{ white-space: normal; } @media (min-width: 901px){ .hero-break{ display:inline; } .hero-nowrap{ white-space: nowrap; } #inicio .hero-text{ max-width: 620px; } } .hero p{ font-size: 17px; max-width: 520px; margin-bottom: 34px; font-weight: 300; color: #eeeeee; } .hero-ctas{ display:flex; gap: 18px; flex-wrap: wrap; } /* HERO COLLAGE */ .hero-collage{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hero-photo{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; } .hero-photo img{ width:100%; height:100%; object-fit:cover; } .hero-photo span{ font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color:#ffffffaa; padding: 10px; } .hero-photo.wide{ grid-column: 1 / span 2; aspect-ratio: 16 / 10; } .hero-photo.tall{ aspect-ratio: 3 / 4; } .hero-grid.single{ grid-template-columns: 1fr; } .hero-grid.single .hero-text{ max-width: 640px; } /* SECTION HEADERS */ .section-head{ text-align:center; max-width: 720px; margin: 0 auto 56px; } .section-head .eyebrow{ display:block; margin-bottom: 14px; } .section-head h2{ font-size: clamp(28px, 3.6vw, 42px); } /* SKILLS / LEARN */ .learn-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; } .learn-item{ background: var(--white); border: 1px solid var(--gray-line); padding: 44px 30px 36px; text-align: center; transition: border-color .25s ease, transform .25s ease; } .learn-item:hover{ border-color: var(--black); transform: translateY(-5px); } .learn-item .icon{ width: 54px; height: 54px; margin: 0 auto 22px; display:flex; align-items:center; justify-content:center; border: 1px solid var(--black); border-radius: 50%; } .learn-item .icon svg{ width: 24px; height: 24px; } .learn-item .num{ font-family: var(--serif); font-size: 12px; color: var(--gray-text); letter-spacing: .18em; margin-bottom: 12px; display:block; text-transform: uppercase; } .learn-item p{ font-size: 15px; color: var(--black); line-height: 1.55; } /* INCLUDES */ .includes{ background: var(--black); color: var(--white); } .includes .section-head .eyebrow{ color: #ffffffaa; } .includes-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #ffffff22; border: 1px solid #ffffff22; } .includes-grid .item{ background: var(--black); padding: 26px 30px; display:flex; gap:16px; align-items:flex-start; font-size: 15px; } .includes-grid .item .mark{ font-family: var(--serif); font-size:18px; opacity:.7; } .includes-grid .item strong{ font-weight: 600; } /* DATES */ .dates-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .date-card{ border: 1px solid var(--black); padding: 30px 26px; text-align:center; transition: all .2s ease; } .date-card:hover{ background: var(--black); color: var(--white); } .date-card:hover .date-badge{ background: var(--white); color: var(--black); } .date-card .date-badge{ display:inline-block; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; border: 1px solid currentColor; padding: 4px 12px; margin-bottom: 18px; font-weight:600; } .date-card .range{ font-family: var(--serif); font-size: 28px; margin-bottom: 6px; } .date-card .month{ font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-text); } .date-card:hover .month{ color: #ffffffaa; } .dates-note{ text-align:center; margin-top: 40px; font-size: 14px; color: var(--gray-text); } /* PRICING */ .pricing{ background: var(--off-white); } .pricing-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 860px; margin: 0 auto; } .price-card{ background: var(--white); border: 1px solid var(--black); padding: 44px 36px; text-align:center; } .price-card .eyebrow{ margin-bottom: 18px; } .price-card .amount{ font-family: var(--serif); font-size: 42px; margin-bottom: 6px; } .price-card .currency-note{ font-size: 13px; color: var(--gray-text); margin-bottom: 26px; } .pricing-disclaimer{ text-align:center; max-width: 640px; margin: 40px auto 0; font-style: italic; font-size: 14px; color: var(--gray-text); } .sensorya-box{ max-width: 860px; margin: 56px auto 0; border: 1px solid var(--black); padding: 36px 40px; display:flex; justify-content:space-between; align-items:center; gap: 24px; flex-wrap: wrap; } .sensorya-box h4{ font-size: 20px; margin-bottom: 6px; } .sensorya-box p{ font-size: 14px; color: var(--gray-text); } .sensorya-box .price{ font-family: var(--serif); font-size: 22px; white-space: nowrap; } /* GALLERY */ .gallery-section{ padding: 72px 0; } .gallery-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; } .gallery-item{ overflow: hidden; aspect-ratio: 3 / 4; } .gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .gallery-item:hover img{ transform: scale(1.07); } /* SENSORYA MODULE */ .sensorya-module{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items:center; } .sensorya-module img{ width:100%; height:100%; object-fit:cover; } .sensorya-module h2{ font-size: clamp(26px,3.4vw,38px); margin-bottom: 20px; } .sensorya-module p{ font-size: 15px; color: var(--gray-text); margin-bottom: 24px; } .sensorya-list{ list-style:none; margin-bottom: 28px; } .sensorya-list li{ font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--gray-line); } .sensorya-list li:last-child{ border-bottom:none; } /* SPLIT MODULE (imagen + texto, reutilizable en cualquier página) */ .split-module{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items:center; } .split-media{ overflow:hidden; } .split-media img{ width:100%; height:100%; aspect-ratio: 4 / 3; object-fit:cover; } .split-module h2{ font-size: clamp(26px,3.4vw,38px); margin-bottom: 20px; } .split-module p{ font-size: 15px; color: var(--gray-text); margin-bottom: 18px; } .split-module p:last-child{ margin-bottom: 0; } /* BENEFICIOS */ .benefits{ background: var(--off-white); } .benefits-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--gray-line); border: 1px solid var(--gray-line); } .benefits-grid .item{ background: var(--white); padding: 26px 30px; display:flex; gap:16px; align-items:flex-start; font-size: 15px; } .benefits-grid .item .mark{ font-family: var(--font-titulos); font-size:18px; opacity:.7; } /* CAMINO (elegí formación o equipamiento) */ .camino-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; } .camino-card{ border: 1px solid var(--black); } .camino-media{ overflow:hidden; aspect-ratio: 4 / 3; } .camino-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; } .camino-card:hover .camino-media img{ transform: scale(1.05); } .camino-body{ padding: 32px 30px; text-align:center; } .camino-body h3{ font-size: 20px; margin-bottom: 12px; } .camino-body p{ font-size: 14px; color: var(--gray-text); margin-bottom: 22px; } .camino-note{ text-align:center; margin-top: 32px; font-size: 14px; color: var(--gray-text); font-style: italic; } /* FAQ */ .faq{ max-width: 820px; margin: 0 auto; } .faq-item{ border: 1px solid var(--gray-line); padding: 0 30px; margin-bottom: 14px; transition: background .2s ease, border-color .2s ease; } .faq-item:hover{ background: var(--off-white); border-color: var(--black); } .faq-item summary{ padding: 22px 0; cursor: pointer; list-style: none; display:flex; align-items:center; gap: 24px; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-num{ font-family: var(--serif); font-size: 13px; color: var(--gray-text); min-width: 26px; text-transform: none; } .faq-q{ flex:1; font-family: var(--serif); font-size: 17px; text-transform: none; } .faq-icon{ width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--black); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family: var(--sans); font-size: 18px; font-weight:300; transition: transform .25s ease, background .2s ease, color .2s ease; } .faq-item[open] .faq-icon{ transform: rotate(45deg); background: var(--black); color: var(--white); } .faq-a{ padding: 0 0 26px 50px; font-size: 14.5px; color: var(--gray-text); max-width: 620px; } /* FINAL CTA */ .final-cta{ background: var(--black); color: var(--white); text-align:center; } .final-cta h2{ font-size: clamp(30px,4vw,46px); margin-bottom: 20px; } .final-cta p{ max-width: 560px; margin: 0 auto 34px; color: #ffffffbb; font-size: 15px; } /* Formulario de reserva (arma un mensaje y lo manda a WhatsApp, ver script.js) */ .reserva-form{ max-width: 640px; margin: 0 auto; text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; } .reserva-form .form-row{ display:flex; flex-direction:column; gap:8px; } .reserva-form .form-row.full{ grid-column: 1 / -1; } .reserva-form label{ font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight:600; color:#ffffffaa; } .reserva-form input, .reserva-form textarea, .reserva-form select{ background: transparent; border: 1px solid #ffffff55; color: var(--white); font-family: var(--sans); font-size: 14px; padding: 12px 14px; } .reserva-form input:focus, .reserva-form textarea:focus, .reserva-form select:focus{ outline:none; border-color: var(--white); } .reserva-form textarea{ resize: vertical; min-height: 84px; } .reserva-form select{ cursor:pointer; } .reserva-form select option{ color: var(--black); } .reserva-form .form-row.full .btn{ cursor:pointer; } .reserva-form .form-actions{ align-items:center; text-align:center; margin-top:8px; } .reserva-form .form-note{ margin-top:14px; font-size:13px; color:#ffffff88; } @media (max-width: 640px){ .reserva-form{ grid-template-columns: 1fr; } } /* SALONES OFICIALES (encontra-tu-head-spa.html) — mapa, filtro y tarjetas */ .salones-controls{ display:flex; align-items:flex-end; justify-content:center; gap:24px; flex-wrap:wrap; margin-bottom: 32px; } .salones-filter{ display:flex; flex-direction:column; gap:6px; text-align:left; } .salones-filter label{ font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:600; color:var(--gray-text); } .salones-filter select{ border:1px solid var(--black); background:var(--white); color:var(--black); font-family:var(--sans); font-size:14px; padding:12px 14px; min-width:220px; cursor:pointer; } .salones-estado{ text-align:center; font-size:13px; color:var(--gray-text); margin-bottom:20px; } .salones-mapa{ width:100%; height:420px; border:1px solid var(--black); margin-bottom:48px; } .salones-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .salon-card{ border:1px solid var(--gray-line); padding:26px; } .salon-card h3{ font-size:18px; margin-bottom:10px; letter-spacing:0.02em; } .salon-address{ font-size:14px; color:var(--gray-text); margin-bottom:8px; } .salon-distance{ font-size:12.5px; color:var(--black); font-weight:600; margin-bottom:14px; } .salon-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .salon-actions .btn{ padding:10px 22px; font-size:11px; } .salon-ig{ font-size:13px; text-decoration:underline; color:var(--gray-text); } .salon-ig:hover{ color:var(--black); } @media (max-width:900px){ .salones-grid{ grid-template-columns:repeat(2,1fr); } .salones-mapa{ height:320px; } } @media (max-width:560px){ .salones-grid{ grid-template-columns:1fr; } .salones-controls{ flex-direction:column; align-items:stretch; } .salones-filter select{ min-width:0; width:100%; } } /* FOOTER */ footer{ background: var(--black); color: #b8b8b8; padding: 64px 0 28px; } .footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; margin-bottom: 48px; } .footer-logo{ font-family: var(--serif); font-size: 24px; color: var(--white); margin-bottom: 16px; } .footer-col h5{ font-family: var(--sans); text-transform: uppercase; letter-spacing:.14em; font-size:12px; color:var(--white); margin-bottom: 18px; } .footer-col a, .footer-col p{ display:block; font-size: 14px; margin-bottom: 12px; color: #b8b8b8; } .footer-col a:hover{ color: var(--white); } .footer-bottom{ border-top: 1px solid rgba(255,255,255,0.16); padding-top: 24px; font-size: 12.5px; color: #b8b8b8; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; } @media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; padding-top: 100px; padding-bottom: 60px; } .hero-collage{ max-width: 420px; } .learn-grid{ grid-template-columns: 1fr; } .includes-grid{ grid-template-columns: 1fr; } .dates-grid{ grid-template-columns: repeat(2,1fr); } .pricing-grid{ grid-template-columns: 1fr; } .gallery-grid{ grid-template-columns: repeat(2,1fr); } .sensorya-module{ grid-template-columns: 1fr; } .split-module{ grid-template-columns: 1fr; } .benefits-grid{ grid-template-columns: 1fr; } .camino-grid{ grid-template-columns: 1fr; } .footer-grid{ grid-template-columns: 1fr; } section{ padding: 64px 0; } } @media (max-width: 560px){ .dates-grid{ grid-template-columns: 1fr; } } /* ============================================================ ABRÍ TU HEAD SPA (equipamiento) Esta página tiene su propio layout (grilla más ancha, catálogo de productos, acordeones) con nombres de clase que se repiten respecto al resto del sitio (.hero, .btn, .eyebrow, header, nav, footer, etc.) pero con valores distintos. Para que conviva en este mismo styles.css sin pisar las otras páginas, todo va con el prefijo ".equipamiento" (clase puesta en el de abri-tu-head-spa.html). ============================================================ */ .equipamiento .eyebrow{ font-size:12px; letter-spacing:.32em; text-transform:uppercase; font-weight:600; color:var(--muted); display:inline-block; margin-bottom:18px; } .equipamiento h1, .equipamiento h2, .equipamiento h3{ font-family:var(--font-titulos); font-weight:400; text-transform:uppercase; letter-spacing:.04em; line-height:1.08; margin:0; } .equipamiento .btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 34px; font-family:var(--sans); font-size:13px; letter-spacing:.24em; text-transform:uppercase; font-weight:600; border:1px solid var(--black); background:var(--black); color:var(--white); cursor:pointer; transition:background .3s ease, color .3s ease; white-space:nowrap; } .equipamiento .btn:hover{ background:var(--white); color:var(--black); } .equipamiento .btn.ghost{ background:transparent; color:var(--black); } .equipamiento .btn.ghost:hover{ background:var(--black); color:var(--white); } /* ---------- Placeholders y carrusel de fotos ---------- */ .equipamiento .media-square{ position:relative; aspect-ratio:1/1; border:1px solid var(--line-strong); background: repeating-linear-gradient(45deg, rgba(10,10,10,.05) 0 1px, transparent 1px 13px); display:flex; align-items:center; justify-content:center; overflow:hidden; } .equipamiento .media-square .ph-label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-strong); padding:10px 16px; background:var(--white); } .equipamiento .media-square img{ width:100%; height:100%; object-fit:cover; } .equipamiento .carousel{ position:relative; } .equipamiento .carousel .media-square{ transition:opacity .25s ease; } .equipamiento .carousel .slide{ display:none; } .equipamiento .carousel .slide.active{ display:flex; } .equipamiento .carousel-controls{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 12px; pointer-events:none; } .equipamiento .carousel-controls button{ pointer-events:all; width:36px; height:36px; border-radius:50%; border:1px solid var(--black); background:var(--white); color:var(--black); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s ease, color .25s ease; } .equipamiento .carousel-controls button:hover{ background:var(--black); color:var(--white); } .equipamiento .carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; } .equipamiento .carousel-dots span{ width:6px; height:6px; border-radius:50%; background:var(--line-strong); cursor:pointer; transition:background .25s ease; } .equipamiento .carousel-dots span.active{ background:var(--black); } /* ---------- Hero ---------- */ .equipamiento .hero{ padding:clamp(24px, 4vw, 48px) var(--gutter) var(--section-y); color:var(--black); } .equipamiento .hero-grid{ max-width:1360px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:72px; align-items:start; } .equipamiento .hero h1{ font-size:clamp(32px, 4.6vw, 58px); max-width:820px; } .equipamiento .hero p{ max-width:520px; margin:26px 0 40px; font-size:16px; color:var(--muted); } .equipamiento .hero-kicker{ font-family:var(--font-titulos); font-size:clamp(17px,1.6vw,21px); text-transform:none; letter-spacing:.01em; color:var(--black); margin:22px 0 0; max-width:520px; } .equipamiento .hero p + .hero-ctas{ margin-top:0; } .equipamiento .hero-ctas{ display:flex; gap:18px; flex-wrap:wrap; } /* La foto del hero se agranda: pasa del recuadro cuadrado 1:1 de los carruseles de producto a su propia proporción 4:5 (la de camahero.PNG), más grande y protagonista. */ .equipamiento .hero-grid .media-square{ aspect-ratio:4/5; max-height:620px; } @media (max-width:900px){ .equipamiento .hero-grid{ grid-template-columns:1fr; gap:36px; } } /* ---------- Section shell ---------- */ .equipamiento section{ padding:var(--section-y) var(--gutter); border-top:1px solid var(--line); } .equipamiento .section-inner{ max-width:1360px; margin:0 auto; } .equipamiento .intro{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; } .equipamiento .intro-text > div{ margin-bottom:20px; } .equipamiento .intro h2{ font-size:clamp(26px,3.4vw,42px); } .equipamiento .intro p{ font-size:16px; color:var(--muted); max-width:46ch; margin:0; } .equipamiento .intro p + p{ margin-top:16px; } @media (max-width:860px){ .equipamiento .intro{ grid-template-columns:1fr; gap:28px; } } .equipamiento .cards{ margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); } .equipamiento .card{ padding:44px 36px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .equipamiento .card .num{ font-family:var(--font-titulos); font-size:13px; letter-spacing:.2em; color:var(--muted); } .equipamiento .card h3{ font-size:20px; margin:22px 0 14px; letter-spacing:.03em; } .equipamiento .card p{ font-size:14.5px; color:var(--muted); margin:0; } @media (max-width:860px){ .equipamiento .cards{ grid-template-columns:1fr; } } /* ---------- Section head ---------- */ .equipamiento .section-head{ text-align:center; max-width:640px; margin:0 auto 56px; border-bottom:1px solid var(--line); padding-bottom:28px; } .equipamiento .section-head h2{ font-size:clamp(28px,3.8vw,48px); } .equipamiento .section-head p{ max-width:38ch; font-size:14.5px; color:var(--muted); margin:12px auto 0; } /* ---------- Tarjeta grande de producto ---------- */ .equipamiento .bed-card{ border:1px solid var(--line-strong); padding:clamp(28px,4vw,56px); margin-bottom:56px; } .equipamiento .bed-card:last-child{ margin-bottom:0; } .equipamiento .bed-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:36px; flex-wrap:wrap; } .equipamiento .bed-top h3{ font-size:clamp(26px,3vw,36px); } .equipamiento .bed-top .tagline{ font-size:13px; letter-spacing:.05em; color:var(--muted); margin-top:10px; display:block; } .equipamiento .bed-price-tag{ text-align:right; } .equipamiento .bed-price-tag .amt{ font-family:var(--font-titulos); font-size:clamp(24px,2.6vw,32px); } .equipamiento .bed-price-tag .cur{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:4px; } .equipamiento .bed-body{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; } @media (max-width:900px){ .equipamiento .bed-body{ grid-template-columns:1fr; } } .equipamiento .bed-media .carousel-dots{ margin-top:14px; } .equipamiento .colors-block{ margin-top:28px; } .equipamiento .colors-block .lbl{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; display:block; } .equipamiento .color-chips{ display:flex; flex-wrap:wrap; gap:22px; } .equipamiento .color-swatch{ display:flex; flex-direction:column; align-items:center; gap:9px; width:64px; } .equipamiento .color-swatch .swatch-name{ font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); text-align:center; line-height:1.3; } .equipamiento .color-swatch .swatch-dot{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } .equipamiento .spec-groups{ display:grid; grid-template-columns:1fr 1fr; gap:0 40px; } @media (max-width:600px){ .equipamiento .spec-groups{ grid-template-columns:1fr; } } .equipamiento .spec-group{ margin-bottom:30px; } .equipamiento .spec-group h4{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--black); margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line); } .equipamiento .spec-group li{ font-size:14px; color:var(--muted); padding:8px 0; border-top:1px solid var(--line); } .equipamiento .spec-group li:first-child{ border-top:none; } .equipamiento .spec-group li strong{ color:var(--black); font-weight:600; } .equipamiento .spec-group .footnote{ font-size:12px; color:var(--muted); font-style:italic; margin-top:8px; } .equipamiento .dims-row{ display:flex; gap:36px; margin:26px 0 4px; flex-wrap:wrap; } .equipamiento .dims-row .lbl{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px; } .equipamiento .dims-row .val{ font-family:var(--font-titulos); font-size:20px; } /* ---------- Ficha técnica desplegable dentro de cada tarjeta ---------- */ .equipamiento .tech-toggle{ border-top:1px solid var(--line); margin-top:10px; } .equipamiento .tech-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:none; border:none; padding:22px 0; cursor:pointer; text-align:left; font-family:var(--sans); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:600; color:var(--black); } .equipamiento .tech-icon{ width:30px; height:30px; min-width:30px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1; transition:transform .3s ease; color:var(--black); } .equipamiento .tech-toggle.open .tech-icon{ transform:rotate(45deg); } .equipamiento .tech-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; } .equipamiento .tech-panel-inner{ padding-top:6px; } /* ---------- Bloque de precios ---------- */ .equipamiento .pricing{ grid-column:1/-1; margin-top:8px; padding-top:36px; border-top:1px solid var(--line); } .equipamiento .pricing-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:26px; } .equipamiento .pricing-main .value{ font-family:var(--font-titulos); font-size:clamp(32px,3.6vw,44px); } .equipamiento .pricing-main .note{ font-size:12px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin-top:8px; } .equipamiento .pricing-cuotas{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:600px){ .equipamiento .pricing-cuotas{ grid-template-columns:1fr; } } .equipamiento .cuota-box{ border:1px solid var(--line-strong); padding:22px 24px; } .equipamiento .cuota-box .lbl{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:10px; } .equipamiento .cuota-box .amt{ font-family:var(--font-titulos); font-size:22px; } .equipamiento .cuota-box .total{ font-size:12.5px; color:var(--muted); margin-top:8px; } .equipamiento .pricing-cta{ margin-top:28px; } /* ---------- Información de compra (recuadro negro) ---------- */ .equipamiento .info-compra{ background:var(--black); color:var(--white); border-top:none; text-align:center; } .equipamiento .info-compra .eyebrow{ color:rgba(255,255,255,.55); } .equipamiento .info-compra h2{ color:var(--white); margin-bottom:22px; font-size:clamp(26px,3.2vw,40px); } .equipamiento .info-compra .lead{ color:rgba(255,255,255,.72); max-width:64ch; font-size:15px; margin:0 auto 52px; } .equipamiento .accordion{ border-top:1px solid rgba(255,255,255,.22); max-width:920px; margin:0 auto; text-align:left; } .equipamiento .acc-item{ border-bottom:1px solid rgba(255,255,255,.22); } .equipamiento .acc-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; background:none; border:none; color:var(--white); font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:13.5px; font-weight:600; padding:26px 2px; cursor:pointer; text-align:left; } .equipamiento .acc-icon{ width:32px; height:32px; min-width:32px; border-radius:50%; border:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; transition:transform .3s ease; color:var(--white); } .equipamiento .acc-item.open .acc-icon{ transform:rotate(45deg); } .equipamiento .acc-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; } .equipamiento .acc-panel-inner{ padding:0 2px 30px; max-width:70ch; } .equipamiento .acc-panel-inner p{ color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.75; margin:0 0 14px; } .equipamiento .acc-panel-inner p:last-child{ margin-bottom:0; } .equipamiento .acc-panel-inner ul{ margin:14px 0; } .equipamiento .acc-panel-inner li{ color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.7; padding-left:20px; position:relative; margin-bottom:8px; } .equipamiento .acc-panel-inner li::before{ content:'—'; position:absolute; left:0; color:rgba(255,255,255,.4); } /* ---------- CTA final ---------- */ .equipamiento .cta-band{ text-align:center; } .equipamiento .cta-band h2{ font-size:clamp(28px,4.2vw,50px); max-width:820px; margin:0 auto 40px; } .equipamiento .cta-box{ border:1px solid var(--line-strong); background:var(--white); max-width:900px; margin:0 auto; padding:clamp(48px,6vw,80px) clamp(24px,5vw,64px); } .equipamiento .cta-box h2{ margin-bottom:36px; } /* ---------- Footer ---------- */ .equipamiento footer{ padding:var(--section-y) var(--gutter) 40px; background:var(--black); color:var(--white); } .equipamiento .footer-grid{ max-width:1360px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:56px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.16); } .equipamiento .footer-grid .logo-f img{ height:30px; margin-bottom:22px; } .equipamiento .footer-grid p{ color:#b8b8b8; font-size:14px; max-width:34ch; } .equipamiento footer .eyebrow{ color:#b8b8b8; } .equipamiento .footer-col li{ margin-bottom:14px; font-size:14.5px; } .equipamiento .footer-col a:hover{ text-decoration:underline; } .equipamiento .social-row{ display:flex; gap:18px; margin-top:24px; } .equipamiento .social-row a{ width:38px; height:38px; border:1px solid rgba(255,255,255,0.4); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; letter-spacing:.05em; transition:background .3s ease, color .3s ease; } .equipamiento .social-row a:hover{ background:var(--white); color:var(--black); } .equipamiento .footer-bottom{ max-width:1360px; margin:0 auto; padding-top:28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#b8b8b8; } @media (max-width:860px){ .equipamiento .footer-grid{ grid-template-columns:1fr; gap:40px; } } /* ============================================================ HOME (index.html) Igual que "Abrí tu Head Spa", esta página trae su propio sistema de diseño (otra paleta —incluso su propio --black—, otra tipografía de reemplazo para "The Seasons" con Cormorant Garamond en vez de Playfair Display, su propia grilla) con nombres de clase que se repiten respecto al resto del sitio (.eyebrow, .btn, .hero, .hero-grid, .hero-text, .section-head, .nav-links, header, section, footer, .footer-grid, .footer-logo, .social-row, etc.) pero con valores distintos. Todo va prefijado con ".home" (clase en el de index.html) para que conviva en este mismo styles.css sin pisar formacion-head-spa.html ni abri-tu-head-spa.html. Las variables (antes en :root) también quedan definidas en ".home" en vez de global, porque --black y --line chocan en VALOR con las variables del resto del sitio (no solo en nombre). ============================================================ */ .home{ --black:#111110; --white:#ffffff; --line:#111110; --line-soft:#c9c6bd; --gray:#615f57; --line-dark:#3a3a36; --gray-inverse:#c7c5bb; --display:"the-seasons",'Cormorant Garamond','Times New Roman',serif; --body:'Josefin Sans',sans-serif; --max:1180px; --pad:clamp(24px,5vw,72px); font-family:var(--body); color:var(--black); background:var(--white); -webkit-font-smoothing:antialiased; font-weight:400; line-height:1.7; } .home .wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); } .home .eyebrow{ font-family:var(--body); font-size:0.7rem; font-weight:600; letter-spacing:0.34em; text-transform:uppercase; color:var(--gray); } .home .on-dark{ color:var(--gray-inverse); } .home .eyebrow-rule{ display:flex; align-items:center; gap:18px; margin-bottom:22px; } .home .eyebrow-rule::before, .home .eyebrow-rule::after{ content:''; flex:1; height:1px; background:var(--line-soft); } .home .eyebrow-rule.left::before{ display:none; } .home .eyebrow-rule.left{ justify-content:flex-start; } .home h1, .home h2, .home h3, .home h4{ font-family:var(--display); font-weight:500; text-transform:uppercase; letter-spacing:0.03em; line-height:1.1; } .home h1{ font-size:clamp(2.6rem,6vw,4.9rem); letter-spacing:0.015em; } .home h2{ font-size:clamp(1.9rem,3.8vw,3rem); } .home h3{ font-size:clamp(1.25rem,2vw,1.55rem); letter-spacing:0.04em; } .home p{ font-weight:300; } .home .lede{ font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.1rem,1.7vw,1.5rem); line-height:1.55; text-transform:none; letter-spacing:0; } .home .btn{ display:inline-block; font-family:var(--body); font-size:0.78rem; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; padding:17px 38px; background:var(--black); color:var(--white); border:1px solid var(--black); transition:background .25s ease,color .25s ease; cursor:pointer; } .home .btn:hover{ background:var(--white); color:var(--black); } /* ---------- Section genérica ---------- */ .home section{ padding-top:clamp(64px,9vw,120px); padding-bottom:clamp(64px,9vw,120px); background:var(--white); } .home .section-head{ margin-bottom:34px; max-width:640px; } .home .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } /* ---------- Hero — framed invitation ---------- */ .home .hero{ padding-top:clamp(70px,10vw,110px); color:var(--black); } .home .hero .wrap{ max-width:1400px; } .home .frame{ position:relative; border:1px solid var(--black); padding:clamp(34px,5vw,60px) clamp(28px,5vw,60px); } .home .frame .corner{ position:absolute; width:14px; height:14px; } .home .frame .corner.tl{ top:-1px; left:-1px; border-top:1px solid var(--black); border-left:1px solid var(--black); } .home .frame .corner.tr{ top:-1px; right:-1px; border-top:1px solid var(--black); border-right:1px solid var(--black); } .home .frame .corner.bl{ bottom:-1px; left:-1px; border-bottom:1px solid var(--black); border-left:1px solid var(--black); } .home .frame .corner.br{ bottom:-1px; right:-1px; border-bottom:1px solid var(--black); border-right:1px solid var(--black); } .home .hero-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(30px,4vw,60px); align-items:center; } .home .hero-text{ text-align:left; } .home .hero-text .eyebrow-rule{ justify-content:flex-start; margin-bottom:24px; } .home .hero-text h1{ font-size:clamp(2.1rem,3.6vw,3.4rem); margin-bottom:24px; } .home .hero-text .lede{ margin-bottom:32px; color:var(--gray); } .home .hero-media{ aspect-ratio:4/3; width:100%; } @media (max-width:860px){ .home .hero-grid{ grid-template-columns:1fr; } .home .hero-media{ order:-1; aspect-ratio:16/10; } } /* ---------- Placeholders de foto ---------- */ .home .photo-ph{ position:relative; border:1px solid var(--black); background:repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(17,17,16,0.06) 9px, rgba(17,17,16,0.06) 10px); display:flex; align-items:center; justify-content:center; overflow:hidden; } .home .photo-ph .ph-label{ font-family:var(--body); font-size:0.62rem; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--gray); background:var(--white); padding:6px 12px; border:1px solid var(--line-soft); } .home .photo-ph img{ width:100%; height:100%; object-fit:cover; } .home .grid-2{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(36px,5vw,72px); align-items:start; } .home .grid-2:not(.reverse){ align-items:center; } .home .grid-2.reverse{ grid-template-columns:0.85fr 1.15fr; } .home .grid-2.reverse .grid-2-text{ order:2; } .home .grid-2.reverse .grid-2-media{ order:1; } /* 3-photo collage — servicios */ .home .collage-3{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:190px 130px; gap:10px; } .home .collage-3 .c1{ grid-column:1/3; grid-row:1; } .home .collage-3 .c2{ grid-column:1; grid-row:2; } .home .collage-3 .c3{ grid-column:2; grid-row:2; } /* single photo — quienes somos */ .home .photo-single{ aspect-ratio:3/4; width:100%; } /* 4 fotos verticales en fila — galería */ .home .gallery-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .home .gallery-strip .photo-ph{ aspect-ratio:3/4; } @media (max-width:860px){ .home .grid-2{ grid-template-columns:1fr; } .home .grid-2.reverse{ grid-template-columns:1fr; } .home .grid-2.reverse .grid-2-text{ order:1; } .home .grid-2.reverse .grid-2-media{ order:2; } .home .collage-3{ grid-template-columns:1fr 1fr; grid-template-rows:150px 110px; } .home .gallery-strip{ grid-template-columns:repeat(2,1fr); } } /* ---------- Quiénes somos — plain, rule divider ---------- */ .home .bio{ max-width:760px; } .home .bio-divider{ height:1px; background:var(--line-soft); margin:28px 0; width:64px; } .home .bio p{ margin-bottom:20px; color:var(--gray); font-size:1.02rem; } /* ---------- Beneficios — small-card carousel ---------- */ .home .benefit-carousel{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:12px; } .home .benefit-card{ width:clamp(140px,18vw,190px); height:clamp(140px,18vw,190px); border:1px solid var(--black); display:flex; align-items:center; justify-content:center; text-align:center; padding:18px; font-family:var(--display); font-size:clamp(0.92rem,1.4vw,1.08rem); text-transform:uppercase; letter-spacing:0.02em; line-height:1.3; transition:background .3s ease,color .3s ease; } .home .benefit-card:hover{ background:var(--black); color:var(--white); } /* ---------- Elegí tu camino — thin-line diptych ---------- */ .home .paths{ display:grid; grid-template-columns:1fr 1fr; } .home .path{ border:1px solid var(--black); padding:clamp(40px,5vw,60px); transition:background .3s ease,color .3s ease; display:flex; flex-direction:column; } .home .path + .path{ border-left:none; } .home .path .eyebrow{ margin-bottom:18px; } .home .path h3{ margin-bottom:18px; } .home .path p{ color:var(--gray); margin-bottom:32px; flex-grow:1; } .home .path:hover{ background:var(--black); color:var(--white); } .home .path:hover p{ color:var(--gray-inverse); } .home .path:hover .eyebrow{ color:var(--gray-inverse); } .home .path:hover .btn{ background:var(--white); color:var(--black); border-color:var(--white); } .home .path .btn{ align-self:flex-start; } /* ---------- Footer (negro) ---------- */ .home footer{ background:var(--black); color:var(--white); padding-top:80px; padding-bottom:40px; } .home .footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:50px; padding-bottom:56px; border-bottom:1px solid var(--line-dark); } .home .footer-grid .eyebrow{ margin-bottom:22px; display:block; } .home .footer-list{ list-style:none; } .home .footer-list li{ margin-bottom:14px; font-size:0.92rem; font-weight:300; color:var(--gray-inverse); } .home .footer-list a:hover{ color:var(--white); } .home .social-row{ display:flex; gap:26px; margin-top:4px; } .home .social-row a{ font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; border-bottom:1px solid transparent; } .home .social-row a:hover{ border-color:var(--white); } .home .copyright{ padding-top:28px; font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--gray-inverse); text-align:center; } /* ---------- Reveal (aparición al hacer scroll) ---------- */ .home .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .7s ease; } .home .reveal.in{ opacity:1; transform:translateY(0); } /* ---------- Responsive ---------- */ @media (max-width:860px){ .home .paths{ grid-template-columns:1fr; } .home .path + .path{ border-left:1px solid var(--black); border-top:none; } .home .benefit-card{ width:clamp(120px,40vw,160px); height:clamp(120px,40vw,160px); } .home .footer-grid{ grid-template-columns:1fr; gap:40px; } } /* ============================================================ ANALIZADORES (analizadores.html) Mismo caso que "Abrí tu Head Spa" y "Home": esta página trae su propio sistema (catálogo de productos, tabla comparativa, acordeón de FAQ, secciones en negro) con nombres de clase que se repiten respecto al resto del sitio (.eyebrow, .btn, header, nav, .hero, section, .section-head, .final-cta, footer, .accordion/.acc-item, etc.) pero con valores distintos. Todo va prefijado con ".analizadores" (clase en el ). OJO: `.accordion`/`.acc-item`/`.acc-trigger`/`.acc-panel`/`.acc-icon` son los MISMOS nombres que usa el acordeón de "Información de compra" de Abrí tu Head Spa — el JS de cada uno está scopeado por body class en script.js para no pisarse entre sí. ============================================================ */ .analizadores{ --line:#d8d8d8; --line-dark:#3a3a3a; --gray:#6b6b6b; --maxw:1280px; background:var(--white); color:var(--black); font-family:var(--sans); font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; } .analizadores .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; } .analizadores h1, .analizadores h2, .analizadores h3{ font-family:var(--font-titulos); font-weight:400; letter-spacing:0.04em; text-transform:uppercase; line-height:1.15; } .analizadores .eyebrow{ font-family:var(--sans); font-size:12px; letter-spacing:0.32em; text-transform:uppercase; font-weight:600; display:inline-block; } /* ---------- Botones ---------- */ .analizadores .btn{ display:inline-block; padding:16px 38px; font-family:var(--sans); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; border:1px solid var(--black); background:var(--black); color:var(--white); transition:background .35s ease, color .35s ease, border-color .35s ease; cursor:pointer; } .analizadores .btn:hover{ background:var(--white); color:var(--black); } .analizadores .btn-outline{ background:transparent; color:var(--black); } .analizadores .btn-outline:hover{ background:var(--black); color:var(--white); } .analizadores .on-black .btn{ border-color:var(--white); background:var(--white); color:var(--black); } .analizadores .on-black .btn:hover{ background:transparent; color:var(--white); } .analizadores .on-black .btn-outline{ border-color:var(--white); background:transparent; color:var(--white); } .analizadores .on-black .btn-outline:hover{ background:var(--white); color:var(--black); } /* ---------- Hero ---------- */ .analizadores .hero{ position:relative; min-height:88vh; display:flex; align-items:center; background: linear-gradient(90deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.6) 45%, rgba(10,10,10,0.32) 100%), url(images/analizadores/hero-bg.jpg) center/cover no-repeat; color:var(--white); } .analizadores .hero .wrap{ width:100%; } .analizadores .hero-content{ max-width:640px; } .analizadores .hero .eyebrow{ color:var(--white); margin-bottom:22px; } .analizadores .hero h1{ font-size:clamp(48px,7vw,96px); margin-bottom:20px; } .analizadores .hero h2{ font-family:var(--sans); text-transform:none; letter-spacing:0.01em; font-weight:300; font-size:clamp(18px,2vw,24px); margin-bottom:22px; max-width:520px; } .analizadores .hero p{ font-size:16px; font-weight:300; max-width:480px; margin-bottom:38px; color:rgba(255,255,255,0.85); } .analizadores .hero-actions{ display:flex; gap:18px; flex-wrap:wrap; } /* ---------- Section genérica ---------- */ .analizadores section{ padding:120px 0; } .analizadores .section-black{ background:var(--black); color:var(--white); } .analizadores .section-black h2, .analizadores .section-black h3{ color:var(--white); } .analizadores .section-black .line{ border-color:var(--line-dark); } .analizadores .section-head{ text-align:center; max-width:720px; margin:0 auto 64px; } .analizadores .section-head .eyebrow{ margin-bottom:18px; color:var(--gray); } .analizadores .section-black .section-head .eyebrow{ color:#b8b8b8; } .analizadores .section-head h2{ font-size:clamp(30px,4vw,46px); } /* ---------- Pilares (Cómo funciona) ---------- */ .analizadores .pillars{ display:grid; grid-template-columns:repeat(3,1fr); } .analizadores .pillar{ padding:0 44px; text-align:center; border-left:1px solid var(--line-dark); } .analizadores .pillar:first-child{ border-left:none; } .analizadores .pillar .num{ font-family:var(--font-titulos); font-size:13px; letter-spacing:.3em; color:#8a8a8a; display:block; margin-bottom:22px; } .analizadores .pillar h3{ font-size:22px; letter-spacing:.12em; } @media (max-width:760px){ .analizadores .pillars{ grid-template-columns:1fr; gap:56px; } .analizadores .pillar{ border-left:none; border-top:1px solid var(--line-dark); padding:44px 10px 0; } .analizadores .pillar:first-child{ border-top:none; padding-top:0; } } /* ---------- Sección editorial ---------- */ .analizadores .editorial{ display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; } .analizadores .editorial h2{ font-size:clamp(30px,4vw,44px); margin-bottom:34px; } .analizadores .editorial p{ font-weight:300; font-size:16px; color:#333; margin-bottom:18px; max-width:460px; } .analizadores .editorial .divider{ width:64px; height:1px; background:var(--black); margin-bottom:30px; } @media (max-width:900px){ .analizadores .editorial{ grid-template-columns:1fr; gap:50px; } } /* ---------- Checklist + imagen ---------- */ .analizadores .feature-split{ display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; } .analizadores .feature-split img{ width:100%; height:560px; object-fit:cover; object-position:top center; } .analizadores .check-list li{ display:flex; align-items:flex-start; gap:16px; padding:20px 0; border-bottom:1px solid var(--line-dark); font-size:16px; font-weight:300; letter-spacing:.02em; } .analizadores .check-list li:first-child{ padding-top:0; } .analizadores .check-list .mark{ width:22px; height:22px; flex:none; border:1px solid var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; margin-top:2px; } @media (max-width:900px){ .analizadores .feature-split{ grid-template-columns:1fr; gap:50px; } .analizadores .feature-split .img-col{ order:-1; } .analizadores .feature-split img{ height:380px; } } /* ---------- Modelos / tarjetas de producto ---------- */ .analizadores .models-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; } .analizadores .models-cta{ text-align:center; margin-top:56px; } .analizadores .model-card{ background:var(--white); border:1px solid var(--line); padding:36px 26px; display:flex; flex-direction:column; } .analizadores .model-card .model-img{ width:100%; aspect-ratio:1/1; object-fit:cover; margin-bottom:22px; } .analizadores .model-card .model-name{ font-size:19px; letter-spacing:.06em; margin-bottom:8px; } .analizadores .model-highlight{ font-family:var(--sans); font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--gray); margin-bottom:20px; display:block; line-height:1.4; } .analizadores .model-card ul{ margin-bottom:auto; } .analizadores .model-card li{ font-size:12.5px; font-weight:300; color:#333; padding:9px 0; border-top:1px solid var(--line); line-height:1.55; } .analizadores .model-card li:first-child{ border-top:none; padding-top:0; } .analizadores .model-footer{ margin-top:26px; padding-top:18px; border-top:1px solid var(--black); } .analizadores .model-price-row{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; } .analizadores .model-price{ font-family:var(--font-titulos); font-size:19px; letter-spacing:.02em; } .analizadores .model-tag{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); } .analizadores .model-installments{ font-size:10.5px; font-weight:400; color:var(--gray); margin-top:8px; letter-spacing:.01em; line-height:1.5; } /* ---------- Acordeón (Antes de comprar) ---------- */ .analizadores .accordion{ max-width:860px; margin:0 auto; } .analizadores .acc-item{ border-bottom:1px solid var(--line); } .analizadores .acc-item:first-child{ border-top:1px solid var(--line); } .analizadores .acc-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; background:none; border:none; cursor:pointer; padding:28px 4px; text-align:left; font-family:var(--sans); font-size:14px; letter-spacing:.18em; font-weight:600; color:var(--black); text-transform:uppercase; } .analizadores .acc-icon{ flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--black); position:relative; transition:transform .4s ease,background .3s ease; } .analizadores .acc-icon::before, .analizadores .acc-icon::after{ content:""; position:absolute; background:var(--black); top:50%; left:50%; transform:translate(-50%,-50%); transition:opacity .3s ease; } .analizadores .acc-icon::before{ width:12px; height:1px; } .analizadores .acc-icon::after{ width:1px; height:12px; } .analizadores .acc-item.open .acc-icon{ transform:rotate(135deg); } .analizadores .acc-panel{ max-height:0; overflow:hidden; transition:max-height .45s ease; } .analizadores .acc-panel-inner{ padding:0 4px 30px; max-width:640px; } .analizadores .acc-panel-inner p{ font-size:14.5px; font-weight:300; line-height:1.75; color:#3a3a3a; margin-bottom:12px; } .analizadores .acc-panel-inner p:last-child{ margin-bottom:0; } .analizadores .acc-panel-inner ul{ margin:10px 0 12px; } .analizadores .acc-panel-inner li{ font-size:14.5px; font-weight:300; line-height:1.75; color:#3a3a3a; padding-left:16px; position:relative; } .analizadores .acc-panel-inner li::before{ content:"–"; position:absolute; left:0; } .analizadores .acc-panel-inner strong{ color:var(--black); font-weight:600; } /* Acordeón sobre fondo negro */ .analizadores .section-black .acc-item{ border-color:rgba(255,255,255,0.16); } .analizadores .section-black .acc-trigger{ color:var(--white); } .analizadores .section-black .acc-icon{ border-color:var(--white); } .analizadores .section-black .acc-icon::before, .analizadores .section-black .acc-icon::after{ background:var(--white); } .analizadores .section-black .acc-panel-inner p, .analizadores .section-black .acc-panel-inner li{ color:#c9c9c9; } .analizadores .section-black .acc-panel-inner strong{ color:var(--white); } /* ---------- Tabla comparativa ---------- */ .analizadores .compare-wrap{ overflow-x:auto; } .analizadores table.compare{ width:100%; border-collapse:collapse; min-width:640px; } .analizadores table.compare th{ background:var(--white); color:var(--black); font-family:var(--sans); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; text-align:center; padding:22px 18px; border:1px solid var(--line); } .analizadores table.compare td{ text-align:center; padding:26px 18px; border:1px solid var(--line); background:var(--white); color:var(--black); font-size:15px; font-weight:300; line-height:1.5; } .analizadores table.compare td.model-col{ font-family:var(--font-titulos); font-size:24px; letter-spacing:.03em; } .analizadores .compare-note{ max-width:760px; margin:34px auto 0; text-align:center; font-size:14px; font-weight:300; color:var(--gray); line-height:1.7; } @media (max-width:1100px){ .analizadores .models-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:700px){ .analizadores .models-grid{ grid-template-columns:1fr; } .analizadores .model-card{ padding:40px 28px; } } /* ---------- Separadores de sección ---------- */ .analizadores section + section{ border-top:1px solid var(--line); } .analizadores section + section.section-black{ border-top-color:rgba(255,255,255,0.14); } /* ---------- CTA final ---------- */ .analizadores .final-cta{ text-align:center; background:var(--white); color:var(--black); } .analizadores .final-cta h2{ font-size:clamp(32px,5vw,54px); margin-bottom:30px; } .analizadores .final-cta p{ font-weight:300; max-width:520px; margin:0 auto 42px; color:#cfcfcf; } /* ---------- Footer ---------- */ .analizadores footer{ background:var(--black); color:var(--white); padding:90px 0 0; } .analizadores .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:60px; padding-bottom:70px; border-bottom:1px solid var(--line-dark); } .analizadores footer img.foot-logo{ height:32px; margin-bottom:26px; } .analizadores footer .foot-col h4{ font-family:var(--sans); font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; margin-bottom:24px; color:#9a9a9a; } .analizadores footer .foot-col li{ padding:8px 0; font-weight:300; font-size:15px; } .analizadores footer .foot-col li a:hover{ opacity:.6; } .analizadores .foot-social{ display:flex; gap:22px; margin-top:6px; } .analizadores .foot-social a{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; border-bottom:1px solid var(--white); padding-bottom:3px; } .analizadores .foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding:30px 0; font-size:12px; letter-spacing:.05em; color:#8a8a8a; flex-wrap:wrap; gap:10px; } @media (max-width:800px){ .analizadores .footer-top{ grid-template-columns:1fr; gap:44px; } } @media (max-width:600px){ .analizadores section{ padding:80px 0; } .analizadores .wrap{ padding:0 24px; } }