<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Work+Sans:300,700,800%7COswald:300,400,500">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/fonts.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../css/style.css" id="main-styles-link">
<style>
    /* 1. FUENTES */
    @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Roboto:wght@400;500&display=swap');

    :root {
        --primary-red: #d91a27;
        --text-black: #0e1133; 
        --text-gray: #666666;
        --bg-light: #f4f7f9;
    }

    /* 2. AREA DEL BANNER (Imagen de la pared) */
    .breadcrumb-area {
        background-image: url('/img/baner1.jpeg'); 
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        height: 0;
        padding-top: 37.5%;
        width: 100%;
        position: relative;
    }

    /* Ajuste específico para cuando la pantalla es estrecha (< 991px) */
    @media (max-width: 991px) {
        .breadcrumb-area {
            margin-top: 70px;            /* Espacio para el menú superior */
            padding-top: 0;
            height: 220px;               /* Reduce la altura para ajustar la proporción */
            background-size: 100% 100%;   /* Ajusta la imagen completa exactamente al ancho y alto */
            background-position: center;
        }
    }

    .container-box {
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
        padding: 0 60px; /* Margen izquierdo para que el texto no se pegue */
    }

    /* Título: Our Services */
    .breadcrumb-title h2 {
        font-family: 'Rajdhani', sans-serif;
        font-size: 60px;
        font-weight: 700;
        color: var(--text-black);
        margin: 0 0 10px 0;
    }

    /* Navegación: Home > Our Services */
    .breadcrumb-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .breadcrumb-nav ul li {
        font-family: 'Rajdhani', sans-serif;
        font-size: 18px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .breadcrumb-nav ul li a {
        color: var(--text-gray); /* Color gris para "Home" */
        text-decoration: none;
    }

    .breadcrumb-nav ul li.active {
        color: var(--primary-red); /* Color rojo para "Our Services" */
    }

    /* 3. SECCIÓN "OUR VALUABLE SERVICES" */
    .sec-main-custom {
        padding: 80px 0;
        background-color: var(--bg-light);
    }

    .title-center {
        text-align: center;
        margin-bottom: 60px;
        padding: 0 60px;
    }

    /* Texto: // What We Do */
    .title-center h5 {
        color: var(--primary-red);
        font-family: 'Rajdhani', sans-serif;
        font-size: 18px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 10px;
        display: block;
    }

    /* Título: Our Valuable Services */
    .title-center h3 {
        font-family: 'Rajdhani', sans-serif;
        font-size: 50px;
        font-weight: 700;
        color: var(--text-black);
        margin: 0;
    }

    /* 4. GRID DE TARJETAS (Con margen de 60px) */
    .inner-section-services .wrap-container {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 60px; /* Evita que las tarjetas toquen los bordes */
    }

    .col-third {
        flex: 1;
        min-width: 320px;
        max-width: 380px;
    }

    .card-service {
        background: #ffffff;
        padding: 50px 45px;
        border-radius: 5px;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
        transition: all 0.4s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .card-title h2 {
        font-family: 'Rajdhani', sans-serif;
        font-size: 26px;
        font-weight: 700;
        color: var(--text-black);
        margin-bottom: 20px;
    }

    .card-description p {
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: var(--text-gray);
    }

    .card-button a {
        font-family: 'Rajdhani', sans-serif;
        font-weight: 700;
        color: var(--text-black);
        text-decoration: none;
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Hover Rojo */
    .card-service:hover {
        background-color: var(--primary-red);
        transform: translateY(-10px);
    }

    .card-service:hover h2, 
    .card-service:hover p, 
    .card-service:hover a {
        color: #ffffff !important;
    }

    /* 5. RESPONSIVO */
    @media (max-width: 767px) {
        .container-box, .inner-section-services .wrap-container {
            padding: 0 25px;
        }
        .breadcrumb-title h2 { font-size: 40px; }
        .title-center h3 { font-size: 30px; }
    }
</style>
</head>
<body>
    <header class="section page-header">
        <!-- RD Navbar-->
        <div class="rd-navbar-wrap">
          <nav class="rd-navbar rd-navbar-minimal" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fixed" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-fixed" data-lg-stick-up-offset="46px" data-xl-stick-up-offset="46px" data-xxl-stick-up-offset="46px" data-lg-stick-up="true" data-xl-stick-up="true" data-xxl-stick-up="true">
            <div class="rd-navbar-main-outer">
              <div class="rd-navbar-main">
                <!-- RD Navbar Panel-->
                <div class="rd-navbar-panel">
                  <!-- RD Navbar Toggle-->
                  <button class="rd-navbar-toggle" data-rd-navbar-toggle="#rd-navbar-nav-wrap-1"><span></span></button>
                  <!-- RD Navbar Brand--><a class="rd-navbar-brand" href="{{ url('/Chiriuchutxt') }}"><img src="{{ asset('img/logoheader.jpg') }}" alt="" class="logo"/></a>
                </div>
                <div class="rd-navbar-main-element">
                  <div class="rd-navbar-nav-wrap" id="rd-navbar-nav-wrap-1">
                    <!-- RD Navbar Nav-->
                    <ul class="rd-navbar-nav">
                      <li class="rd-nav-item active"><a class="rd-nav-link" href="{{ url('/Chiriuchutxt') }}">Inicio</a></li>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="{{ url('/chiriuchutxt.com/blog') }}">Blog</a>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="{{ url('/chiriuchutxt.com/servicios') }}">Servicios</a>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="">Redes</a>
                        <!-- RD Navbar Dropdown-->
                        <ul class="rd-menu rd-navbar-dropdown">
                          <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="https://pe.linkedin.com/company/chiri-uchu-txt">LinkedIn</a></li>
                          <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="https://www.instagram.com/chiriuchutxt/">Instagram</a></li>
                          <li class="rd-megamenu-list-item"><a class="rd-megamenu-list-link" href="https://www.facebook.com/ChiriUchuTXT">Facebook</a></li>
                        </ul>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="https://wa.me/51980809521?text=Hola,%20vengo%20de%20tu%20página%20web%20y%20quiero%20información" 
   target="_blank">Contactanos</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </header>
<div class="breadcrumb-area">
    <div class="container-box">
        <div class="row-box">
            <div class="col-full">
            </div>
        </div>
    </div>
</div>
<section class="sec-main-custom" data-section="custom-001">
    <div class="wrap-container">
        <div class="col-full custom-shape-box" data-col="main-col">

            <div class="widget-title-box" data-widget="title">
                <div class="title-container">
                    <div class="title-center">
                        <h5>// Qué hacemos?</h5>
                        <h3>Nuestros Servicios</h3>
                    </div>
                </div>
            </div>

            <section class="inner-section-services" data-inner="services">
                <div class="wrap-container">

                    <!-- SERVICIO 1 -->
                    <div class="col-third" data-item="service-1">
                        <div class="widget-box">

                            <div class="card-service">
                                <div class="card-content">
                                    <div class="card-text">

                                        <div class="card-icon-area">
                                            <div class="icon-box">
                                                <i class="flaticon flaticon-settings-1"></i>
                                            </div>
                                        </div>

                                        <div class="card-inner">
                                            <div class="card-title">
                                                <h2>TRADUCCIÓN</h2>
                                            </div>

                                            <div class="card-description">
                                                <p>¿Buscando una traducción confiable y hermosa?</p>
                                            </div>
                                            <br>
                                            <div class="card-button">
                                                <a href="{{ route('servicios.show', 'traduccion') }}">
                                                    Leer más
                                                    <i class="flaticon flaticon-right-arrow"></i>
                                                </a>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- SERVICIO 2 -->
                    <div class="col-third" data-item="service-2">
                        <div class="widget-box">

                            <div class="card-service">
                                <div class="card-content">
                                    <div class="card-text">

                                        <div class="card-icon-area">
                                            <div class="icon-box">
                                                <i class="flaticon flaticon-upload"></i>
                                            </div>
                                        </div>

                                        <div class="card-inner">
                                            <div class="card-title">
                                                <h2>CORRECCIÓN DE ESTILO</h2>
                                            </div>

                                            <div class="card-description">
                                                <p>¿Necesitas “sacarle” el texto a un audio o video?</p>
                                            </div>  
                                            <br>
                                            <div class="card-button">
                                                <a href="{{ route('servicios.show', 'correccion') }}">
                                                    Leer más
                                                    <i class="flaticon flaticon-right-arrow"></i>
                                                </a>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- SERVICIO 3 -->
                    <div class="col-third" data-item="service-3">
                        <div class="widget-box">

                            <div class="card-service">
                                <div class="card-content">
                                    <div class="card-text">

                                        <div class="card-icon-area">
                                            <div class="icon-box">
                                                <i class="flaticon flaticon-support-2"></i>
                                            </div>
                                        </div>

                                        <div class="card-inner">
                                            <div class="card-title">
                                                <h2>TRANSCRIPCIÓN</h2>
                                            </div>

                                            <div class="card-description">
                                                <p>¿Necesitas “sacarle” el texto a un audio o video?</p>
                                            </div>  
                                            <br>
                                            <div class="card-button">
                                                <a href="{{ route('servicios.show', 'transcripcion') }}">
                                                    Leer más
                                                    <i class="flaticon flaticon-right-arrow"></i>
                                                </a>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- SERVICIO 4 -->
                    <div class="col-third" data-item="service-1">
                        <div class="widget-box">

                            <div class="card-service">
                                <div class="card-content">
                                    <div class="card-text">

                                        <div class="card-icon-area">
                                            <div class="icon-box">
                                                <i class="flaticon flaticon-settings-1"></i>
                                            </div>
                                        </div>

                                        <div class="card-inner">
                                            <div class="card-title">
                                                <h2>LOCUCIÓN PROFESIONAL</h2>
                                            </div>

                                            <div class="card-description">
                                                <p>¿Necesitas una voz que impresione para resaltar tus anuncios? ¿Estás creando un videojuego con Inkas y necesitas recrear sus voces?</p>
                                            </div>
                                            <br>
                                            <div class="card-button">
                                                <a href="{{ route('servicios.show', 'locucion') }}">
                                                    Leer más
                                                    <i class="flaticon flaticon-right-arrow"></i>
                                                </a>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </section>

        </div>
    </div>
</section>
<!-- Page Footer-->
      <footer class="section footer-linked bg-gray-700">
        <div class="footer-linked-main">
          <div class="container">
            <div class="row row-50">
              <div class="col-lg-8">
                <h4>Servicios</h4>
                <hr class="offset-right-1">
                <div class="row row-20">  
                  <ul class="list list-xs">
                    <a>Conectamos los idiomas originarios del Perú <br>(como quechua, shipibo o aymara) con las lenguas <br> de otras partes del mundo.</a>
                  </ul>
                </div>
              </div>
              <div class="col-md-7 col-lg-4">
                <h4>Contactenos</h4>
                <hr>
                <ul class="list-sm">
                  <li class="object-inline"><span class="icon icon-md mdi mdi-phone text-gray-700"></span>
                    <ul class="list-0">
                      <li><a class="link-default" href="https://wa.me/51980809521?text=Hola,%20vengo%20de%20tu%20página%20web%20y%20quiero%20información" 
   target="_blank">+51 980 809 521</a></li>
                    </ul>
                  </li>
                  <li class="object-inline"><span class="icon icon-md mdi mdi-email text-gray-700"></span><a class="link-default" href="mailto:hi@chiriuchutxt.com">hi@chiriuchutxt.com</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="footer-linked-aside">
          <div class="container">
            <!-- Rights-->
            <p class="rights"><span>&copy;&nbsp;</span><span class="copyright-year"></span><span>&nbsp;</span><span>chiriuchutxt.com.</span><span>&nbsp;</span><br class="d-sm-none"/><a href="privacy-policy.html">Todos los Derechos Reservados.</a></p>
          </div>
        </div>
      </footer>
<script src="../js/core.min.js"></script>
<script src="../js/script.js"></script>
<script>
    fetch('/update-view-data/blog', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    });
</script>
</body>
</html>