/* ========================================================================== Página "Cómo llegar" / Transporte (transporte.php) — Tortutravel Rediseño con personalidad: timeline, badges, foto inmersiva, animaciones. ========================================================================== */ :root { --tt-green: #2d5a27; --tt-green-light: #4a7c40; --tt-yellow: #ffc73b; /* acento (mismo amarillo del logo) */ --tt-yellow-deep: #b8860b; --tt-bg-soft: #f4f7f2; --tt-border: #e3e8de; } .transporte-page { background: #fff; } /* -------------------------------------------------------------------------- Animaciones de entrada al hacer scroll. Se aplican SOLO si hay JS (), para que sin JS el contenido se vea con normalidad. NO están capadas por prefers-reduced-motion (las quiere ver siempre). -------------------------------------------------------------------------- */ .js-reveal .tt-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } .js-reveal .tt-reveal.is-visible { opacity: 1; transform: none; } /* --- Hero --- (mismo comportamiento de navbar que las fichas de tour) */ #transport-hero { position: relative; min-height: 58vh; background-size: cover; background-position: center; display: flex; align-items: center; /* centra verticalmente (como los demás heroes) */ justify-content: center; /* centra horizontalmente */ } #transport-hero .transport-hero-filter { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%); } #transport-hero .hero-content { position: relative; z-index: 2; width: 100%; padding: 5rem 1rem; color: #fff; text-align: center; } #transport-hero h1 { color: #fff; margin: 0 0 1rem; border: none; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.15; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); } #transport-hero .hero-content p { color: #f2f2f2; max-width: 640px; margin: 0 auto; font-size: 1.05rem; line-height: 1.6; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); } @media (max-width: 860px) { #transport-hero { min-height: 52vh; } #transport-hero .hero-content { padding: 4rem 1rem; } } /* --- Migas de pan --- */ .breadcrumb { background: var(--tt-bg-soft); border-bottom: 1px solid var(--tt-border); font-size: 0.9rem; } .breadcrumb .container { padding: 0.85rem 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .breadcrumb a { color: var(--tt-green); text-decoration: none; } .breadcrumb a i { color: var(--tt-green-light); } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb span { color: #8a958a; } .breadcrumb .current { color: #333; font-weight: 600; } /* --- Contenedor principal --- */ .transport-main { padding: 2.5rem 1rem 3.5rem; } .transport-main .container { max-width: 1000px; } .transport-main h2 { color: var(--tt-green); font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 1rem; } .transport-main h2 i { color: var(--tt-green-light); margin-right: 0.45rem; } .transport-main p { line-height: 1.7; color: #333; } .transport-main strong { color: #1f3d1b; } /* Título de sección centrado, con subrayado amarillo de acento */ .transport-section-title { text-align: center; position: relative; padding-bottom: 0.85rem; margin-bottom: 1.8rem; } .transport-section-title::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 60px; height: 3px; background: var(--tt-yellow); border-radius: 2px; } .transport-intro { margin-bottom: 2.8rem; } .transport-intro p { margin: 0 0 1rem; } /* -------------------------------------------------------------------------- Timeline "Cómo llegar, paso a paso" -------------------------------------------------------------------------- */ .transport-steps { margin-bottom: 3rem; } .steps-track { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .step { position: relative; text-align: center; padding: 0 0.4rem; } /* Línea conectora entre marcadores (detrás de ellos) */ .step:not(:last-child)::after { content: ''; position: absolute; top: 32px; left: 50%; width: 100%; height: 3px; background: var(--tt-border); z-index: 0; transform: translateY(-50%); } .step-marker { position: relative; z-index: 1; width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--tt-green); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(45, 90, 39, 0.25); } .step-icon { font-size: 1.5rem; } .step-num { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--tt-yellow); color: #3a2e00; font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } .step-body h3 { color: var(--tt-green); font-size: 1.02rem; margin: 0 0 0.35rem; } .step-body p { color: #555; font-size: 0.9rem; line-height: 1.5; margin: 0; } @media (max-width: 720px) { .steps-track { grid-template-columns: 1fr; gap: 0; } .step { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; text-align: left; padding: 0 0 1.6rem; } .step-marker { margin: 0; } .step-body { padding-top: 0.4rem; } .step:not(:last-child)::after { top: 64px; bottom: 0; left: 31px; width: 3px; height: auto; transform: none; } } /* -------------------------------------------------------------------------- Opciones (público / privado) -------------------------------------------------------------------------- */ .transport-options { margin-bottom: 3rem; } .options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; align-items: stretch; } .option-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tt-border); border-radius: 14px; padding: 1.7rem 1.6rem 1.6rem; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Barra de acento superior */ .option-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--tt-green), var(--tt-green-light)); border-radius: 14px 14px 0 0; } .option-card--featured { border-color: var(--tt-green-light); } .option-card--featured::before { background: linear-gradient(90deg, var(--tt-yellow), var(--tt-green-light)); } .option-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(45, 90, 39, 0.18); } /* Badge flotante ("El más popular" / "Más flexible") */ .option-badge { position: absolute; top: -12px; right: 16px; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.75rem; border-radius: 20px; font-size: 0.78rem; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .option-badge--popular { background: var(--tt-yellow); color: #3a2e00; } .option-badge--popular i { color: var(--tt-yellow-deep); } .option-badge--flex { background: var(--tt-green); color: #fff; } .option-badge--flex i { color: var(--tt-yellow); } .option-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; } .option-icon { font-size: 1.6rem; color: #fff; background: var(--tt-green-light); width: 52px; height: 52px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .option-card--featured .option-icon { background: var(--tt-green); } .option-head h3 { margin: 0; color: var(--tt-green); font-size: 1.15rem; line-height: 1.25; } .option-desc { margin: 0 0 1rem; color: #444; line-height: 1.6; font-size: 0.97rem; } .option-features-label { font-weight: 600; color: var(--tt-green); margin: 0 0 0.5rem; font-size: 0.92rem; } .option-features { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: 0.5rem; } .option-features li { display: flex; align-items: flex-start; gap: 0.55rem; color: #333; font-size: 0.94rem; line-height: 1.5; } .option-features li i { color: var(--tt-green-light); margin-top: 0.2rem; } .option-price { margin-top: auto; display: flex; flex-direction: column; margin-bottom: 0.9rem; } .price-amount { color: var(--tt-green); font-size: 1.7rem; font-weight: 800; line-height: 1.1; } .price-iva { font-size: 0.78rem; font-weight: 700; color: #8a6d1a; white-space: nowrap; } .price-unit { color: #666; font-size: 0.88rem; margin-top: 0.25rem; } .price-extra { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--tt-green-light); font-size: 0.9rem; font-weight: 600; margin-top: 0.4rem; } .price-extra i { font-size: 0.7rem; } /* Nota pequeña dentro de la tarjeta (p.ej. excedente fuera de Tortuguero) */ .option-note { display: flex; gap: 0.45rem; font-size: 0.82rem; color: #777; font-style: italic; line-height: 1.45; margin: 0 0 0.9rem; } .option-note i { color: var(--tt-green-light); font-style: normal; margin-top: 0.15rem; flex-shrink: 0; } .cash-badge { display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; background: #fff6e5; color: #8a6d1a; border: 1px solid #f0e0b0; padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; } .cash-badge i { color: #b98a3e; } .price-note { margin: 1.2rem 0 0; font-size: 0.85rem; color: #777; font-style: italic; text-align: center; } /* -------------------------------------------------------------------------- Formulario de solicitud de transporte (-> WhatsApp) -------------------------------------------------------------------------- */ .transport-book { margin-bottom: 3rem; } .transport-book-intro { text-align: center; max-width: 620px; margin: 0 auto 1rem; color: #444; } /* Aviso: el público no se reserva */ .transport-book-public-note { display: flex; gap: 0.5rem; align-items: flex-start; max-width: 620px; margin: 0 auto 1.6rem; background: #fff6e5; border: 1px solid #f0e0b0; color: #8a6d1a; border-radius: 10px; padding: 0.7rem 1rem; font-size: 0.9rem; line-height: 1.45; } .transport-book-public-note i { color: #b98a3e; margin-top: 0.15rem; flex-shrink: 0; } .transport-form { background: var(--tt-bg-soft); border: 1px solid var(--tt-border); border-radius: 16px; padding: 1.8rem; max-width: 680px; margin: 0 auto; } .transport-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .transport-form .form-field { display: flex; flex-direction: column; } .transport-form .form-field--full { grid-column: 1 / -1; } .transport-form label { font-size: 0.88rem; font-weight: 600; color: var(--tt-green); margin-bottom: 0.35rem; } .transport-form input, .transport-form select { padding: 0.7rem 0.8rem; border: 1px solid var(--tt-border); border-radius: 8px; font-size: 0.95rem; font-family: inherit; background: #fff; color: #333; } .transport-form input:focus, .transport-form select:focus { outline: none; border-color: var(--tt-green-light); box-shadow: 0 0 0 3px rgba(74, 124, 64, 0.15); } .transport-form .btn-cta { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; cursor: pointer; border: none; font-size: 1rem; } .transport-form-note { display: flex; gap: 0.45rem; font-size: 0.83rem; color: #777; font-style: italic; margin: 1rem 0 0; line-height: 1.45; } .transport-form-note i { color: var(--tt-green-light); font-style: normal; margin-top: 0.15rem; flex-shrink: 0; } @media (max-width: 560px) { .transport-form .form-row { grid-template-columns: 1fr; gap: 0.9rem; } } /* -------------------------------------------------------------------------- Aparcamiento -------------------------------------------------------------------------- */ .transport-parking { display: flex; align-items: center; gap: 1.5rem; background: var(--tt-bg-soft); border: 1px solid var(--tt-border); border-left: 5px solid var(--tt-yellow); border-radius: 14px; padding: 1.8rem; margin-bottom: 3rem; } .parking-icon { font-size: 3rem; color: var(--tt-green-light); flex-shrink: 0; } .parking-body h2 { margin-bottom: 0.6rem; } .parking-body p { margin: 0 0 1rem; } .parking-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.4rem; } .parking-actions .btn-cta { display: inline-flex; align-items: center; gap: 0.5rem; } .transport-parking .btn-cta-outline { background: transparent; color: var(--tt-green); border: 2px solid var(--tt-green-light); } .transport-parking .btn-cta-outline:hover { background: var(--tt-green-light); color: #fff; } @media (max-width: 620px) { .transport-parking { flex-direction: column; text-align: center; } .parking-actions { justify-content: center; } } /* -------------------------------------------------------------------------- Info práctica -------------------------------------------------------------------------- */ .transport-info { margin-bottom: 3rem; } .info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; } .info-list li { display: flex; align-items: flex-start; gap: 0.6rem; color: #333; line-height: 1.55; } .info-list li i { color: var(--tt-green-light); margin-top: 0.25rem; } /* -------------------------------------------------------------------------- FAQ (acordeón animado por script.js, clase .tour-faq) -------------------------------------------------------------------------- */ .transport-faq { margin-bottom: 3rem; } .tour-faq details { border: 1px solid var(--tt-border); border-radius: 8px; padding: 0 1rem; margin-bottom: 0.6rem; background: #fff; overflow: hidden; } .tour-faq summary { cursor: pointer; font-weight: 600; color: var(--tt-green); padding: 0.8rem 0; list-style: none; } .tour-faq summary::-webkit-details-marker { display: none; } .tour-faq summary::after { content: '+'; float: right; font-size: 1.5rem; line-height: 1; color: var(--tt-green-light); transition: transform 0.3s ease; } .tour-faq details[open] summary::after { transform: rotate(45deg); } .tour-faq details p { margin: 0; padding: 0.2rem 0 0.9rem; color: #444; line-height: 1.6; } /* -------------------------------------------------------------------------- CTA final sobre foto (banner inmersivo, redondeado) -------------------------------------------------------------------------- */ .transport-cta--photo { position: relative; background-size: cover; background-position: center; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18); } .transport-cta--photo .cta-filter { position: absolute; inset: 0; background: linear-gradient(rgba(20, 33, 15, 0.74), rgba(20, 33, 15, 0.7)); } .transport-cta--photo .cta-inner { position: relative; z-index: 1; padding: 3.2rem 1.5rem; text-align: center; color: #fff; } .transport-cta--photo h2 { color: #fff; } .transport-cta--photo p { color: #f0f0f0; max-width: 560px; margin: 0 auto 1.5rem; } .transport-cta-buttons { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; } .transport-cta-buttons .btn-cta { display: inline-flex; align-items: center; gap: 0.5rem; } .btn-whatsapp { background: #25d366; border: 2px solid #25d366; } .btn-whatsapp:hover { background: #1eb958; border-color: #1eb958; } .transport-cta--photo .btn-cta-outline { background: transparent; color: #fff; border: 2px solid #fff; } .transport-cta--photo .btn-cta-outline:hover { background: #fff; color: var(--tt-green); } /* -------------------------------------------------------------------------- Efectos hover (micro-interacciones) -------------------------------------------------------------------------- */ /* Timeline: el marcador sube y crece, el número hace "pop" y gira */ .step-marker { transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .step:hover .step-marker { transform: translateY(-6px) scale(1.06); background: var(--tt-green-light); box-shadow: 0 12px 24px rgba(45, 90, 39, 0.32); } .step-num { transition: transform 0.3s ease; } .step:hover .step-num { transform: scale(1.18) rotate(-8deg); } .step-body h3 { transition: color 0.25s ease; } .step:hover .step-body h3 { color: var(--tt-green-light); } /* Tarjetas de opción: el icono gira y crece al pasar por la tarjeta */ .option-icon { transition: transform 0.35s ease, background 0.3s ease; } .option-card:hover .option-icon { transform: scale(1.12) rotate(-6deg); } /* Aparcamiento: el icono rebota al pasar por la sección */ .parking-icon { transition: transform 0.35s ease; } .transport-parking:hover .parking-icon { transform: scale(1.15) rotate(6deg); } /* Botones (formulario y parking): elevación + sombra */ .transport-form .btn-cta, .parking-actions .btn-cta { transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .transport-form .btn-cta:hover, .parking-actions .btn-cta:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18); } /* FAQ: se resalta al pasar */ .tour-faq summary { transition: color 0.2s ease; } .tour-faq summary:hover { color: var(--tt-green-light); } .tour-faq details { transition: border-color 0.25s ease, box-shadow 0.25s ease; } .tour-faq details:hover { border-color: var(--tt-green-light); box-shadow: 0 4px 14px rgba(45, 90, 39, 0.08); } /* Info práctica: el check se agranda al pasar por la fila */ .info-list li i { transition: transform 0.25s ease; } .info-list li:hover i { transform: scale(1.3); } /* Campos del formulario: borde verde al pasar el ratón (antes del focus) */ .transport-form input:hover, .transport-form select:hover { border-color: var(--tt-green-light); }